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 |