Layouts

stack

Vertical flow with uniform gap. The default container for everything.

<div data-layout="stack" data-gap="sm">…</div>

row

Horizontal flow. Add data-wrap to allow wrapping.

<div data-layout="row" data-gap="sm" data-justify="between">…</div>

grid

data-cols of 1–4, or auto for fill-as-many-as-fit (min 280px). Cols 4 collapse to 2 under 1024px, cols 3 under 768px, everything to 1 under 480px.

<div data-layout="grid" data-cols="3" data-gap="lg">…</div>

sidebar

240px sticky sidebar + fluid main. Collapses to a single column under 768px. Children are named by slot.

<div data-layout="sidebar">
  <aside data-slot="sidebar">…</aside>
  <main data-slot="main">…</main>
</div>

centered

Centered max-width column. prose = 65ch, content = 768px, wide = 1200px (default).

<div data-layout="centered" data-width="prose">…</div>

hero

Full-viewport centered section for landings.

<section data-layout="hero">
  <div data-layout="stack" data-gap="lg" data-align="center">…</div>
</section>

split

Two equal columns; one column under 768px.

<div data-layout="split" data-gap="lg">…</div>

Modifiers

data-gap     = xs | sm | md | lg | xl | 2xl
data-align   = start | center | end | stretch
data-justify = start | center | end | between | around