When to use it

Use Card when a group of related information needs a clear surface boundary and a predictable slot model. It works especially well for summary modules where title, support text, actions, and detail rows should stay aligned across many screens.

Slot strategy

Card is most useful when each slot has a clear job:

• CardHeader for title, description, and optional top-level action
• CardContent for the main details, metrics, or rich body content
• CardFooter for the final CTA or supporting controls

Layout guidance

Cards work best when the spacing between sections stays consistent. Resist the urge to restyle each card from scratch with heavy one-off utility classes. Instead, keep the recipe intact and let content density or slot presence create the variation.

For grids, use one consistent width and let copy wrap naturally. For detail views, cards can be wider, but the same slot order still helps maintain rhythm across the page.