Card
Use the card component to display information in a compact way and link to other internal pages.
On this page
On this page
Usage
Use cards to summarize the central idea behind some content and provide a link to its corresponding detailed resource. It is important to present the information in a concise manner, avoiding lengthy and complex descriptions.
Cards should always be used in groups of two or more related concepts.
Use cards in groups to display related information.
Don't use isolated cards. Consider using a CTABanner instead.
Stacked
Cards should be stacked to display a list of items that are related to each other. If displaying a visual asset, do so for all cards to achieve a visually balanced layout. The visual asset should be the same type for all cards, either an icon or an image.
For a better visual experience, we recommend using similar length size for the heading and description in all stacked cards.
Use the same type of visual asset for all cards and a similar length size for the content.
Don't use different length sizes for the title or the description.
When using an image as the visual asset, we recommend using the same aspect ratio for all images. This will create a more balanced visual experience.
Use the same image ratio and a similar length sizes for the content.
Don't use different image ratios and a different length size for the content.
Cards typically appear in groups of three or four in desktop viewports. For smaller viewports, or when more than four cards are needed, we recommend stacking the cards vertically. You can use the Grid or the Stack component to achieve this.
Stack cards vertically so that the content has enough line length.
Anatomy
Visual asset
The visual asset is optional and can be an image or an icon. It can be used to provide a visual cue to the user about the content of the card. To avoid visual noise, we recommend using only one icon or image, but not both in the same card.
Use only one visual asset per card.
Don't use both icon and image as the visual asset.
Label
The label can be used to indicate the type of content or its status. For example, use it to indicate that the content is new or that it is a beta feature. The label is optional and can be used along with a visual asset.
Heading
The heading is the main title of the card. It should be short and concise.
Description
The description is an optional short text that extends the information provided by the heading.
Call to action
The call to action label indicates the action or resource the card links to. It defaults to "Learn more".
Options
Border
Card offers a variation with a border. Border is disabled by default.
Related components
- Pillar: To display related content with less visual emphasis.
- River: To display a list of content items with a visual asset.
- CTABanner: To display a single block of content to draw attention or create urgency around a user action.
- UnorderedList or the OrderedList: to display a list of plain content items.