Card Preview
A card is a container that holds information and actions related to a single concept or object, like a document or a contact.
Cards can give information prominence and create predictable patterns. While they're very flexible, it's important to use them consistently for particular use cases across experiences.
Resources
Layout
Anatomy
Card anatomy is flexible based on the needs of the card. Use the CardPreview, CardHeader, and CardFooter components to organize images, titles, body content, and actions within the card.
Consider the hierarchy of information within the card and how it can be organized into sections. For example, names and titles in the header and actions in the footer.
Alignment
Cards can be aligned vertically or horizontally. Vertical cards are made up of slots for a header, a body, and a footer. Horizontal cards can have a header and a body, which will appear left to right. All slots are optional.
Horizontal
Vertical
Size
Card sizes are variable to accommodate a range of different content needs. The following sizing behaviors are built into cards to ensure they can adapt to many different circumstances.
| Property | Height | Width |
|---|---|---|
| Fixed (height & width) | User defined | User defined |
| Fixed height, auto width | User defined | fit-content |
| Fixed width, auto height | fit-content | User defined |
| Auto (height & width) | fit-content | fit-content |
| Block (height & width) | 100% | 100% |
| Fixed height, block width | User defined | 100% |
| Fixed width, block height | 100% | User defined |
Behavior
Card interactions
Cards can provide people with interactions in a number of ways. When there are multiple available actions, a card can hold buttons and links.
If there is one obvious action, the entire card surface can function as a button.
Cards can also be used to let people make a selection, similar to checkboxes or radio groups.
By default, there is no indicator on cards that signifies they are selectable but interaction states like hover and focus can hint to selectability. For a stronger signifier, use the floatingAction prop to build in additional cues.
Accessibility
Aria labels
Make sure to provide meaningful aria-label, aria-describedby and aria-labelledby whenever needed, especially for selectable cards.
Focus order in cards
Cards can treat focus in different ways to ensure they meet the needs of each experience. By using the focusMode prop, you can specify the focus behavior of a card as well as the actions it contains.
| Value | Description |
|---|---|
off | The actions in the card will be focusable but the card container won’t receive or manage focus |
no-tab | The card will be focusable and trap focus inside it. Tab cycles through the card actions. ESC exits the card |
tab-exit | The card will be focusable and trap focus inside it. Tab and ESC exit the card |
tab-only | The card will be focusable but won’t trap focus |
Content
No matter the type of content in a card, they should offer bite-sized pieces of information that people need to know first. This information should encourage them to take an action directly from the card or click through for more info.
Real estate is limited so keep card content brief and action oriented.