Stack
Usage
Stack spaces its children evenly along one axis; it is how Fleetline keeps components margin-free. A form is a vertical stack of fields; a header is a horizontal stack of title and actions. Use Cluster for items that should wrap onto new lines (button rows, filter chips, tags), and Grid for two dimensions.
- Pick the gap from the scale: 2–3 inside a component, 4 between fields, 6–8 between sections.
- Never add margins to children to "fix" spacing — change the parent's gap or nest another stack.
Anatomy
- Container —
.stack(column) or.stack--horizontal(row), or.cluster(wrapping row) - Gap —
.stack--gap-{1|2|3|4|6|8}or--stack-gap/--cluster-gap - Children — any elements, no margins
Examples
Stack
WO-4182 · Replace front brake pads
WO-4185 · Annual safety inspection
WO-4190 · Replace wiper blades
gap-14px
gap-28px
gap-312px
gap-416px
gap-624px
gap-832px
<div class="stack stack--gap-3">…</div>
<div class="stack stack--horizontal stack--gap-2">…</div>
<!-- Any token works through the custom property -->
<div class="stack" style="--stack-gap: var(--space-5)">…</div>Cluster
Open work orders (12)
<div class="cluster">…</div>
<div class="cluster cluster--between"><h2>Open work orders (12)</h2><button …>New work order</button></div>API
| Hook | Values | Purpose |
|---|---|---|
.stack | block class | Vertical flex column with gap |
.stack--horizontal, .stack--align-center | modifier class | Row direction; center alignment |
.stack--gap-1 | -2 | -3 | -4 | -6 | -8 | modifier class | Gap from --space-* (4 is default) |
.cluster, .cluster--between | block / modifier | Wrapping row; push items to the ends |
--stack-gap, --cluster-gap | custom property | Assign a --space-* token |
Do and don't
Accessibility
- Layout only: no roles, no keyboard behavior.
- Keep DOM order equal to visual order; don't reorder with
orderorflex-direction: row-reverse, or Tab order and reading order will diverge. - Gaps use logical flow, so RTL needs nothing extra.
Tokens
| Custom property | Purpose |
|---|---|
--space-1 | -2 | -3 | -4 | -6 | -8 | Gap steps |
--stack-gap (default --space-4), --cluster-gap (default --space-2) | Component-level gap hooks |