Spacer

The Spacer component is a simple tool to add vertical spacing between elements. It helps to create clean and well-organized layouts by inserting customizable blank space without resorting to the margin property.

Basic spacer

The default spacer adds a 12px height between elements. To use the default spacer, simply include an empty div with the spacer class:

<div class="spacer"></div>

This will insert a 12px space between components, such as lists, buttons, or cards.

Custom spacer sizes

Fernand offers several predefined spacer sizes to fit different layout needs. You can use these spacer classes to create more or less vertical space:

• spacer--xs for 4px spacing

• spacer--s for 8px spacing

• spacer--m for 16px spacing

• spacer--l for 24px spacing

• spacer--xl for 32px spacing

• spacer--xxl for 48px spacing

Use the modifier class in combination with the regular spacer class.

<div class="spacer spacer--xl"></div>

This example would add 32px of vertical space between elements.

You can also use the divider component to create a visual hierarchy.