Commonly recognized by visitors and generally reserved for data-rich visualization.
A card is a flexible, customizable container for content. It displays a snippet of information and can link to more details upon interaction.
There are three types of cards to present related information:
- Default card
- News card
- Card with imagery
The default card that consists of a heading, description and sometimes an call to action.
Card with imagery
Cards with imagery help to visually communicate information. Use them to help your visitors understand your content better.
When and how to use it
Use cards to:
- Highlight an action you want people to take
- Group related content
- Add imagery to blocks of text
- Showcase an important bit of information
All cards include container text. Cards can also include a(n):
Be clear in the text about what someone will find at the card’s destination, especially in the title and button.
Use sentence case capitalization for titles, action menus, and buttons.
How not to use it
Avoid misrepresenting the content visitors will find at the card’s destination.
Do not overload the card content. The visitor expects to find more detailed information elsewhere, so it is okay to keep it brief.
Standard accessibility review
Each time a new component version is published: