Cards
Content containers with anatomy, linked hover behavior, imagery, footers, and color-callout variants.
Card anatomy
Header, media body, content, and footer slots arranged for admin content.
Launch readiness
Release surface for the design system sprint.
Design tokens, states, and copy snippets are ready for implementation.
HoverActiveFocusDisabled
Interactive cards
Link-like cards lift subtly and deepen their border treatment on hover.
Interactive insight
Hover to inspect the lift and shadow-deepening effect.
HoverActiveFocusDisabled
Colored headers
Solid token headers create strong hierarchy without decorating the whole screen.
Primary
Colored header
Body content remains calm and readable.
Secondary
Colored header
Body content remains calm and readable.
HoverActiveFocusDisabled
Color callouts
Full colored cards for high-priority notices and summary callouts.
Success callout
Use for high-impact summaries and status blocks.
Danger callout
Use for high-impact summaries and status blocks.
Warning callout
Use for high-impact summaries and status blocks.
Primary callout
Use for high-impact summaries and status blocks.
HoverActiveFocusDisabled