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.
Card anatomy is flexible based on the needs of the card. Use the
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.
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.
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.
|Fixed (height & width)||
|Fixed height, auto width||
|Fixed width, auto height||
|Auto (height & width)||
|Block (height & width)||
|Fixed height, block width||
|Fixed width, block height||
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.
Make sure to provide meaningful
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.
||The actions in the card will be focusable but the card container won’t receive or manage focus|
||The card will be focusable and trap focus inside it. Tab cycles through the card actions. ESC exits the card|
||The card will be focusable and trap focus inside it. Tab and ESC exit the card|
||The card will be focusable but won’t trap focus|
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.