Overview
Use a card to create a meaningful content group whose elements share one topic or task.
Content card
Header, body, and footer establish a predictable reading and action order.
Quarterly planning
Updated 2 hours ago
Review goals, owners, and delivery risks before the planning session.
Anatomy
A card surface can contain media, a header, body content, and a footer, but only the regions needed by the content should be rendered.
Project title
Supporting context
- 1Media
Optional image, illustration, or visual preview.
- 2Header
Title, supporting context, identity, and local status.
- 3BodyRequired
Primary information that belongs to the card.
- 4Footer
Actions or metadata that conclude the group.
When to use
Cards work best for repeatable, self-contained content groups that benefit from visual separation.
Recommended
- Group one coherent subject
Keep the title, details, metadata, and actions about the same object or task.
- Support scanning
Use repeated card anatomy for comparable projects, people, assets, or plans.
- Offer one whole-card action
Use asButton when activating anywhere performs the same primary action.
When not to use
Do not add card surfaces when hierarchy, density, or semantics call for a simpler pattern.
Avoid
- Do not card every section
Use headings, spacing, and dividers when content already belongs to one page flow.
- Do not use for dense comparison
Use DataTable or List when column alignment and rapid row scanning matter.
- Do not nest interactive cards
A whole-card button must not contain other links, buttons, or form controls.
Variants
Choose a surface treatment from hierarchy and background needs, not decoration alone.
Surface treatments
Elevated, filled, and outlined cover most product-interface needs.
Elevated
Separates content from a flat background with depth.
Filled
Groups content with a quiet tonal surface.
Outlined
Defines a boundary without adding elevation.
Gradient and glass
Reserve expressive treatments for branded or promotional contexts.
States
Static cards do not need interaction states; interactive and selectable cards must communicate every available state.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Default | Static grouped content | Stable surface treatment | Only nested controls are interactive |
| Hover | Pointer enters an interactive card | Surface or elevation changes | Signals the card can be activated |
| Focus | Keyboard focuses an asButton card | Visible focus indicator | Enter or Space activates the card |
| Pressed | Card is being activated | Brief active feedback | Action has not yet completed |
| Selected | Card represents a chosen option | Selected ring or border | Selection may be toggled or changed |
| Disabled | Action is unavailable | Use native disabled treatment on asButton | Cannot be activated |
Behavior
The card’s semantics depend on whether it groups content or represents one action.
Static container
Leave as a div when the card only groups content and nested actions.
Whole-card action
Set asButton when the entire surface performs one action.
Selection
Pair selected visuals with aria-pressed or selection state in the surrounding pattern.
Responsive layout
Let cards reflow and avoid fixed heights that clip translated or enlarged content.
Accessibility
Card itself adds no landmark semantics; use meaningful headings and native controls according to the content and action model.
| Key | Action |
|---|---|
| Tab | Moves to nested controls or to an asButton card. |
| EnterSpace | Activates an asButton card. |
- Use asButton for a single whole-card action.
- Never place interactive descendants inside an asButton card.
- Keep heading levels consistent with the page hierarchy.
- Write useful alt text for meaningful media and empty alt text for decorative media.
- Expose selected state programmatically.
- Keep focus indicators visible against every variant.
Content guidelines
Card content should be concise enough to scan and complete enough to understand without guessing.
Lead with the subject
Use a specific title that distinguishes the card from nearby items.
Quarterly planning
Prioritize details
Show only information needed to identify or act on the item.
Updated 2 hours ago
Use clear actions
Label buttons with the outcome rather than generic direction.
View plan
Keep repeated cards parallel
Use the same fields and content order across a collection.
Owner · Status · Due date
Examples
Interactive selection cards are appropriate when each card is one mutually comparable choice.
Selectable action card
The whole surface is one button and exposes pressed state.
Props / API
Card accepts native div attributes; asButton changes the rendered element to a button. Compound regions accept their matching div attributes.
Card
Props
Compound components
Props