Spacer Component

Whitespace separator utilities for horizontal, vertical, and flex-fill spacing. Uses --spacing (4px base unit) for sizing.

Notes

Basic usage

spacer (vertical)

Block A
Block B (1rem gap)

spacer-v (horizontal)

Left Right (1rem gap)

spacer-fill (flex fill)

Left Right

Spacer sizes (spacer-*)

spacer-1 (4px) ~ spacer-4 (16px)

A
1
2
3
4

spacer-5 (20px) ~ spacer-10 (40px)

A
5
6
8
10

spacer-12 (48px) ~ spacer-20 (80px)

A
12
16
20

Spacer-v sizes

spacer-v-1 ~ spacer-v-4

A1 2 3 4

spacer-v-5 ~ spacer-v-10

A5 6 8 10

spacer-v-12 ~ spacer-v-20

A12 16 20

Spacer-fill use cases

Left-right alignment

Left Right

Left-center-right layout

Left Center Right

Nav bar example

Logo Home About Contact