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.

Loading...

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.

PropertyHeightWidth
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.

ValueDescription
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-exitThe card will be focusable and trap focus inside it. Tab and ESC exit the card
tab-onlyThe 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.