Page container
One element that centres content at a named width (prose, narrow, default, wide or full) and keeps a 16, 24 or 32 px gutter from the screen edge. No vertical space, no background.
- Control
- No additional dependencies
Layout and page composition
Containers, grids and page structure for arranging website content.
Category: Layout
Components
7 components
Site shell
The outer frame of every page: a skip link, optional announcement bar, header, main landmark and footer, with the footer held at the bottom of short pages and anchors kept clear of a sticky header.
- Section
- No additional dependencies
Split layout
Two content regions side by side on proportional columns, stacking to one column in a chosen order below a breakpoint measured on the component's own width. The DOM order is always primary then secondary.
- Control
- No additional dependencies
Section heading
A section introduction: optional eyebrow, a heading whose level is set apart from its size, a description held to about 70 characters a line and an optional action that sits on the text's last line.
- Control
- No additional dependencies
Card shell
A card container with optional media, header, body and footer. Outline, elevated or muted surface, three padding presets, and an optional whole-card link that stays one tab stop. Footers line up across a row.
- Control
- No additional dependencies
Section wrapper
A page section with four tones, four spacing presets and four container widths. Same-tone neighbours merge into one band, anchor jumps clear a sticky header, and a heading id makes it a named region.
- Control
- No additional dependencies
Responsive grid
A CSS grid that fits as many columns as a minimum item width allows, or takes explicit counts per breakpoint. Works in sidebars through container queries and lines card parts up with subgrid.
- Control
- No additional dependencies
