Stack

data-stack is a vertical list with the standard gap. Use it wherever two or three blocks should sit above each other with the same space as everything else on the page.

Basic

<div data-stack>
  <aside data-callout="earth"><strong>ledger ships at 16:30</strong><p>The build is green and the release note is written.</p></aside>
  <label data-field>
    <span>Quick note</span>
    <textarea rows="4" placeholder="Something to keep"></textarea>
    <small>Saved to this machine only.</small>
  </label>
  <menu><li><button data-toast="Note saved" data-toast-tone="go">Save note</button></li></menu>
</div>

The gap is --s72-gap, the same one the grid uses, so a stack beside a grid lines up.

Notes

• A <ul> or <ol> with data-stack drops its bullets and padding.
• Tickets inside a data-stack mirror every other one, just as they do inside data-tickets.
• Override --s72-gap on the stack itself to tighten or loosen one group without touching the page.