Anatomy
- Header: The top section of the card
- Header content: A content that describes the card’s main content. Typically it includes title, subtitle, or supporting visuals such as avatar or badge.
- Actions: Optional area for supplementary actions for the card
- Content: The main area for information, data, images, or other elements.
- Footer: Bottom area of the card. Typically includes main actions of the card, or supplementary matadata.
Usage Guidelines
When to use this component
- Use to group content and actions on a single topic together
- Use to divide content into clearly defined sections.
When not to use this component
- Don’t use to inform user about important changes or conditions in the interface. Use Banner instead.
Composing a card
Cards need to work across different contexts and products. By focusing on composition instead of prescribing content, we let you build cards that suit your needs.
System provides: Semantic containers (CardHeader, CardContent, CardFooter, CardMedia) that handle spacing and structural behavior. For example, CardMedia can break out to the edges while the card maintains its padding.
You provide: The actual content inside those containers based on what your users need.
The same CardHeader works for a simple card with just a title, or a complex one with an avatar, title, subtitle, and actions. The structure stays consistent. The content adapts.
Deciding on composition
When building a card, consider:
- What's the hierarchy? What does the user need to understand first, second, third? Think in layers. What information comes first (Header), what's the main content (Content), what should they do after (Footer)? This determines which sections you need and what goes in them
- What's the user's goal? Are they consuming information, taking action, or both? This helps determine what content belongs in each section.
- What's the minimum? Start with the simplest composition that serves the purpose. Add sections or elements only when they add clear value.
Best Practices
Use the Card to display information on a single topic.
Don’t nest cards within cards. Use spacing and dividers to structure layout inside.
Use titles that clearly represent the content of the card
Don’t use more than one primary action on a card
Do not use the actions slot in the header for persistent primary actions, use the footer of the card instead.
General Component Behaviors
Width
Card always spans the full available width of its parent.
Variants
Raised
Use the Raised variant to present non-editable data or information. Raised cards appear elevated above the background, making them suitable for displaying content that is not in an edit state.
Inset
Use the Inset variant for subdued look. Inset cards appear embedded in the surface, which makes them less pronounced.
Styles
Spacing
None
Removes padding from the card. Useful when full control of the spacing is needed, or when placing interactive elements that should span the whole width of the card e.g, list menu items.
Medium (Default)
Applies Medium padding to the header and content of the card. Useful for most scenarios.
Large
Applies Large padding to the header and content of the card. Useful for promotional sections, landing pages, or rich visuals.
Content Guidelines
- Use titles that distinctly represent the intended purpose of the card.
For further information, see the Content Styleguide.