Layouts
Container widths
Container max-width
var(--container-max-width) Content max-width
var(--content-max-width) Breakout styles
Standard content width paragraph. This represents the normal reading width for body text, optimised for comfortable reading.
.breakout — 160% width, centred
Back to standard width. The .breakout class can be applied to images, device screenshots, or any element that should break out of the text column.
<img src="..." class="breakout" /> <div class="breakout"><DeviceScreenshot ... /></div> Spacing scale
--space-xs
--space-sm
--space-md
--space-lg
--space-xl
--space-2xl
--space-3xl
--space-4xl
Grid layouts
Two column
Column 1
Column 2
Three column
Column 1
Column 2
Column 3
Auto-fill (responsive)
Item
Item
Item
Item
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) Breakpoints
Mobile < 768px
Tablet 768px – 1024px
Desktop > 1024px