Card

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

Default card

The default card that consists of a heading, description and sometimes a call to action.

  

    
Card title
    
Use the content found at the button link to inspire your card title.
    
      Button with link related to card title
    
  

Card with imagery

Cards with imagery help to visually communicate information. Use them to help your visitors understand your content better.

• Example for card with imagery
• Source code for card with imagery

Example

Icon

Infographic

Commonly recognized by visitors and generally reserved for data-rich visualization.

Image

Give your card a short title

Use this space to briefly tell your reader what they will find at the card's destination

Source code

Icon

  

    
    Infographic
    
Commonly recognized by visitors and generally reserved for data-rich
     visualization.
  

Image

  
  

    

      
        Give your card a short title
      
    
    

      Use this space to briefly tell your reader what they will find at the
      card's destination
    
  

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