Stack-layout

Simple vertical or horizontal stack with consistent gap. The most basic layout primitive — for ordered sequences where one axis carries meaning.

When to use

Toolbars, action rows.
Form field stacks.
Vertical sequences with consistent spacing.

For wrap-aware grids, use Grid-layout. For two-column with collapse, use Split-layout.

Variants

Variant	Class / data	Effect
Vertical	`.stack-layout` (default)	Flex column
Horizontal	`data-direction="horizontal"`	Flex row, wraps
Gap s/m/l/xl	`data-gap="s	m
Cross-axis align	`.-start` / `.-center` / `.-end` / `.-stretch`	align-items
Justify (h only)	`.-between` / `.-around` / `.-evenly`	justify-content

Anatomy

<!-- Vertical (default) -->
<section class="stack-layout">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</section>

<!-- Horizontal toolbar -->
<div class="stack-layout" data-direction="horizontal" data-gap="s">
  <button class="button -ghost -s">Bold</button>
  <button class="button -ghost -s">Italic</button>
  <button class="button -ghost -s">Underline</button>
</div>

<!-- Spread to ends -->
<div class="stack-layout" data-direction="horizontal" class="-between">
  <h1>Title</h1>
  <button class="button -primary">Action</button>
</div>

Tokens used

--space-gap-elements-{s,m}, --space-gap-blocks-{m,l} — gaps
--space-inset-section-m — outer padding