Layout primitives
Compositional building blocks for page structure. These primitives handle common layout patterns—stacking, centering, grids, sidebars—so you can compose complex layouts from simple, predictable parts.
The base + modifier pattern
All layout primitives follow a consistent base + modifier pattern:
- Base class provides the core behavior and sets CSS custom properties
- Modifiers only override specific variables—never set properties directly
This means you always need both the base class and any modifiers:
<!-- Correct: base + modifier -->
<div class="stack stack-compact">...</div>
<div class="box box-tight">...</div>
<section class="section section-wide">...</section>
<!-- Incorrect: modifier alone won't work -->
<div class="stack-compact">...</div>This pattern enables:
- Composability—stack multiple modifiers on one element
- Container queries—base class sets up containment, modifiers respond to it
- Predictability—modifiers only adjust, never replace, base behavior
Cover
Vertically centered full-screen panel. Great for page heroes and dramatic editorial breaks. Add a header and footer tag to anchor content to the top and bottom of the cover.
An interview with Ned Ludd
By Jeremiah Brandreth
Sidebar
Two-column layout with a fixed-width sidebar and flexible main content. Automatically stacks on narrow containers. The sidebar element is always the first child.
.sidebar (default)
Sidebar on the left, main content on the right with no gap.
.sidebar-reverse
Flips the visual order—sidebar appears on the right while remaining first in source order.
.sidebar-1px
Sidebar on the left, main content on the right with 1px gap.
.sidebar-snug
Sidebar on the left, main content on the right with single-line gap.
.sidebar-loose
Sidebar on the left, main content on the right with double-line gap.
Section
Full-width container with responsive horizontal padding and bottom padding by default. Sections with color schemes automatically add top padding when following non-scheme siblings. Use to divide pages into distinct regions with edge-to-edge backgrounds.
.section (default)
.section-wide
Reduced horizontal padding for wider content.
.section-full-bleed
No padding—content extends to edges.
.section-spaced
Generous vertical padding for major page divisions.
.section-snug
Single-line vertical padding top and bottom.
.section-tight
No vertical padding.
.section-top-tight / .section-bottom-tight
Remove padding from just one edge.
Center
Horizontally centers content with a maximum width based on ideal reading measure. The go-to primitive for article text, forms, or any single-column content.
.center-narrow
Constrained to the narrow measure. Use for focused content like login forms or short-form text.
.center (default)
Standard measure (~65 characters). Optimal for body text and long-form reading.
.center-wide
Wide measure. Use for content that benefits from more horizontal space, like dashboards or data tables.
Grid
Auto-responsive grid that adapts to available space without breakpoints. For more control, use fixed column classes with container query modifiers.
.grid (default)
Automatically responsive. Items reflow based on a minimum column width (~20rem), no breakpoints needed.
.grid-narrow
Narrower minimum column width for denser grids like color swatches or thumbnails.
Fixed columns
Explicit column counts with container query breakpoints: @md (40rem) and @lg (60rem).
Column and row spans
Span items across multiple columns or rows. Spans also support container query modifiers.
Gap sizes
Control spacing between grid items.
.grid-gap-0
.grid-gap-1px
.grid-gap-05
.grid (default: single-line gap)
.grid-gap-2
Stack
Injects consistent vertical space between child elements. The fundamental primitive for controlling vertical rhythm—use it everywhere you need evenly-spaced content flowing downward.
.stack-compact
Half-line spacing. Use for tightly related items like form fields or compact lists.
.stack (default)
Single-line spacing. The baseline rhythm for most content.
.stack-half
Half-line spacing. Half the baseline rhythm for tighter content.
.stack-comfortable
Double-line spacing. Use for separating distinct content blocks or card layouts.
.stack-spacious
Quadruple-line spacing. Use for major section breaks or hero layouts.
Cluster
Groups items horizontally with wrapping. Perfect for navigation, tag lists, button groups, or any set of inline elements that should flow and wrap naturally.
.cluster (default)
Single-line gap, aligned to the start.
.cluster-compact
Half-line gap for tighter groupings like tags or pills.
.cluster-center
Centers items horizontally within the container.
.cluster-end
Aligns items to the end (right in LTR languages).
.cluster-between
Distributes items with equal space between them. Great for navbars with logo on one side and links on the other.
Box
Simple padding wrapper. Use inside other primitives to add breathing room around content, especially when applying background colors.