Cards contain content and actions about a single subject.
A card is a single, contained unit that stands alone, without relying on surrounding elements for context. Cards should be easy to scan for relevant and actionable information. Place elements, like text and images, on cards in a way that clearly indicates hierarchy.
Two card variations are supported.
- Standard
- Standard list
The card container is the only required element in a card. All other elements are optional.
Card layouts can vary to support the types of content they contain. The following elements are commonly found among that variety.
- Container
- Card title
- Toolbar icon button
- Menu icon button
- Card text
- Border
- Fill
The card menu is accessed from the card menu icon in the card's top-right corner. You can define a set of items, specific to the card, that appear in the card menu when it is displayed.
The toolbar appears to the left-of the menu icon button. You can define a set of toolbar icons, specific to the card, that appear in the toolbar. An event can be associated with each toolbar icon.
Use the standard list variation when you need cards to represent items in a list. The standard list card aligns all card elements horizontally.
Cards are Interactive components that provide visual feedback when the pointer hovers over them.
A card's menu and toolbar icon buttons exhibit the standard hover behavior of icon buttons. For more information, see Icon buttons.
Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
For more information about cards, see:
- Material Design – Components > Card
- Material UI – Material UI > Components > Surfaces > Card
For information about related components, see: