Default
Create one clear content group
Use the semantic element that matches the content. The Card class supplies only layout and visual treatment.
Project update
Brand platform is ready for review
The core direction, component inventory, and accessibility baseline are ready for the team.
Composition
Keep structure flexible
Header, Body, Media, and Footer slots establish rhythm while allowing the content to choose appropriate HTML.
Design systems
A shared language for product teams
Tokens, components, and guidance keep decisions consistent across product surfaces.
Variants and density
Use depth to express hierarchy
Flat reduces emphasis, default creates a regular surface, and Elevated belongs to content that temporarily needs stronger prominence.
Flat · Compact
Supporting content
A quiet group within an already defined region.
Surface · Default
Primary content
The standard treatment for independent content.
Elevated · Large
Focused content
Additional depth and space for a prominent moment.
Interactive Card
Make one destination the whole target
Render the Card as a native Link when every part leads to the same destination. Keep other interactive elements outside that Card.
Horizontal
Adapt editorial content to available space
The layout becomes a single column below the mobile breakpoint, keeping the reading order unchanged.
Studio journal
Designing clarity into every layer
A practical look at how foundations, components, and content rules reinforce one another.
Usage guidance
Let content determine the element.
Use Article for self-contained content, Section for a named region, and Div when no stronger semantic applies. A clickable Card should contain one destination.
Next component: Divider