Stack – Tsunami

Vertical

Children run top to bottom, 16px apart. Use it to lay out page sections or forms without margins.

First line

Second line

Third line

<div class="stack">
  <p>First line</p>
  <p>Second line</p>
  <p>Third line</p>
</div>

Row: data-direction="row"

Lays children out in a row, centered vertically, and wraps when space runs out. Good for button groups or badges.

<div class="stack" data-direction="row" data-gap="sm">
  <button type="button" class="btn">Save draft</button>
  <button type="button" class="btn" data-variant="primary">Publish</button>
</div>

Gap sizes: data-gap

sm 8px, default 16px, lg 32px

sm · 8px New Bestseller Sale

Default · 16px New Bestseller Sale

lg · 32px New Bestseller Sale

<div class="stack" data-gap="lg">
  <div class="stack" data-direction="row" data-gap="sm">
    <strong>sm · 8px</strong>
    <span class="badge">New</span>
    <span class="badge">Bestseller</span>
    <span class="badge">Sale</span>
  </div>
  <div class="stack" data-direction="row">
    <strong>Default · 16px</strong>
    <span class="badge">New</span>
    <span class="badge">Bestseller</span>
    <span class="badge">Sale</span>
  </div>
  <div class="stack" data-direction="row" data-gap="lg">
    <strong>lg · 32px</strong>
    <span class="badge">New</span>
    <span class="badge">Bestseller</span>
    <span class="badge">Sale</span>
  </div>
</div>

Nested in a form

Stacks can nest, such as a vertical form with a row of buttons at the bottom.

<form class="stack docs-narrow">
  <div class="field">
    <label for="st-name">Product name</label>
    <input id="st-name" value="Cotton T-shirt" />
  </div>
  <div class="field">
    <label for="st-price">Price ($)</label>
    <input id="st-price" type="number" value="24" />
  </div>
  <div class="stack" data-direction="row" data-gap="sm">
    <button type="submit" class="btn" data-variant="primary">Save</button>
    <button type="reset" class="btn">Cancel</button>
  </div>
</form>

Attributes

Attribute / element	Values	Description
`.stack`		Vertical flex with 16px between children. Works on any element (`div`, `form`, `section` ...)
`data-direction`	`row`; omit for vertical (default)	Horizontal, wraps, and centers items vertically
`data-gap`	`sm`, `lg`; omit for 16px (default)	8px or 32px gap