When to Use
Example: product shelf
- Grouping related content (image, title, description, actions) into a single scannable unit
- Presenting items in a grid or list layout such as product listings, articles, or profiles
- Creating visual separation between independent content blocks on a page
- Avoid using Card as a wrapper for full-page sections — use semantic layout elements instead
Usage Guidelines
DO
Use Card to group related pieces of information — header, media, text, and actions — into a single scannable unit
Don’t
Don't nest multiple cards inside each other — flatten the hierarchy or use a list instead
DO
Keep action buttons in CardFooter and limit to 2 actions max for clear decision-making
Don’t
Don't overload a card with too many interactive elements — split into separate cards or use a detail page
Interaction Behavior
| State | Behavior |
|---|---|
| Default | Static container; child elements handle their own interactions |
| Header action | IconButton in header responds to hover/focus/active independently |
| Footer buttons | Standard Button interaction states (hover, active, disabled) |
| Image | Non-interactive by default; can be wrapped with a link for clickable behavior |
Accessibility
| Requirement | Implementation |
|---|---|
| Semantic structure | Use <article> wrapper via role or semantic HTML when card represents a standalone content unit |
| Heading hierarchy | CardTitle renders as <p> — wrap with heading tag if card title should participate in page outline |
| Image alt text | Always provide meaningful alt on CardImage or mark decorative images with alt="" |
| Action labels | Buttons in CardFooter must have clear, descriptive labels |
| Focus order | Tab order follows DOM order: header action → footer buttons |