Stack
Column flex + gap. Modifiers .stack--1 … .stack--12.
Closed 4px-unit scale (Tailwind-compatible): token key
N = N × 4px. Padding, margin, gap, plus
.stack / .cluster.
One base unit --ca-space-unit (0.25rem / 4px). Steps stay dense through
24px, then widen (32 → 48 → 64 → 80 → 96) so large gaps stay distinct. Prefer parent
gap over child margins.
| Token | × unit | px @ 16 | Typical use |
|---|---|---|---|
--ca-space-1 |
1 | 4 | Icon + label, dense tables |
--ca-space-2 |
2 | 8 | Related controls, button gutters |
--ca-space-3 |
3 | 12 | Card internal padding, list rows |
--ca-space-4 |
4 | 16 | Default component padding |
--ca-space-5 |
5 | 20 | Tight section / popover padding |
--ca-space-6 |
6 | 24 | Section padding inside panels |
--ca-space-8 |
8 | 32 | Between component groups |
--ca-space-10 … 12 |
10–12 | 40–48 | Large content blocks |
--ca-space-16 … 24 |
16–24 | 64–96 | Page / hero / marketing sections |
1
2
3
4
5
6
8
10
12
16
20
24
Live
.p-4 padding box
<div class="stack stack--4">
<div class="cluster cluster--2">…</div>
<div class="p-4">…</div>
</div>import { Stack, Cluster } from 'caustica-design/core'
<Stack gap={4}>
<Cluster gap={2}>…</Cluster>
<div className="p-4">…</div>
</Stack>
Column flex + gap. Modifiers .stack--1 … .stack--12.
Wrapping row flex + gap for chips and actions.
.p-*, .m-*, axes (.px/.py,
.mx/.my), sides with logical
.ps/.pe/.pt/.pb (and
.ms/.me/…).
ps/pe) stay RTL-safe.| Class | Description |
|---|---|
.stack / .stack--{n} |
Column flex; gap from space scale. |
.cluster / .cluster--{n} |
Wrapping row flex; gap from space scale. |
.gap-{n} |
Gap utility for any flex/grid parent. |
.p-* / .m-* (+ axes / sides) |
Padding and margin from the space scale (+ auto where useful). |
Stack and Cluster from src/core/Layout.tsx —
gap prop maps to --{n} modifiers.