Stack inside card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae.
Tag
Tag
Tag
Container sizes
Choose a layout width
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper.
This line uses text-primary.
.container-s
Shorter line length for text-heavy sections.
.container
Default layout container.
.container-l
Roomier layout for grids and media.
.container-xl
Widest layout for full-bleed sections.
Layout objects demo
Containers, sections, stacks, clusters, grids
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet arcu et velit facilisis, nec dignissim nibh varius.
.container
.section
.stack
.cluster
.grid
Hero section built from a stack
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula dolor sed sapien commodo, nec euismod nulla cursus.
Typography
Type scale and utilities
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim.
Headings
Heading H1
Heading H2
Heading H3
Body styles
Text inverse for standard body copy.
Text inverse muted for secondary description.
Text caption for labels.
Grid of cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.
Grid item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae.
Tag
Tag
Grid item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae.
Tag
Tag
Tag
Tag
Stack + cluster comparison
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis.
.stack
Stack creates vertical rhythm.
Each item sits below the previous.
Spacing is controlled by modifiers.