Spacings

The spacer component is an utility which can be used on (almost) each component to set vertical spacers. Spacer options will appear in the dialog in an additional tab when the spacer utility is available for that component. Spacing is always applied outside the component (we set the margin instead of the padding). Each component comes with default spacing settings but can be overriden to meet specific designs. By default only the bottom-spacer is activated, because when you activate both top and bottom-spacing you will end up with double spacing.

Responsiveness

The spacer is a responsive utility which means that the styling is based on the size (width) of the screen. When you want to change the setting of the spacer you have a few options:

Option Default size Larger screen size
off 0px 0px
xs 8px 8px
s 8px 16px
m 16px 24px
l 24px 32px
xl 32px 40px
xxl 64px 80px

Examples

xxl spacing - bottom

xl spacing - bottom

l spacing - bottom

m spacing - bottom

s spacing - bottom

xs spacing - bottom

no spacing