Spacer
Fixed-height spacing block using design token steps.
Category: layout · WCAG 2.1-AA · layout, spacer, spacing
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 1|2|3|4|5|6|8|10|12 | 4 | Spacing token step |
Design tokens
--cascivo-space-*
When to use
- Inserting a fixed vertical gap between blocks using spacing token steps
- Adding deliberate breathing room where margins are awkward
When not to use
- Spacing a series of siblings — use Flex with a gap instead
- Arbitrary one-off spacing — prefer token-based gap props
Examples
Spacer
Adds vertical space between elements
<Spacer size={8} />Related components
- Flex — Use gap on Flex to space multiple siblings consistently