Example: product shelf
Use Card to group related pieces of information — header, media, text, and actions — into a single scannable unit
Don't nest multiple cards inside each other — flatten the hierarchy or use a list instead
Keep action buttons in CardFooter and limit to 2 actions max for clear decision-making
Don't overload a card with too many interactive elements — split into separate cards or use a detail page
| 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 |
| 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 |