Card

A card is a flexible, customizable container for content. It displays a snippet of information and can link to more details upon interaction.

Sample

Usage

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):

• Title
• Image
• Link
• Button

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.

Accessibility

Standard accessibility review

Each time a new component version is published:

• Test with the axe accessibility tool
• Review with the VoiceOver or NVDA screen reader
• Ensure all actionable elements are accessible by keyboard command and tab in a logical order
• Check the component layout on a variety of screen sizes