Components

Content Group - Cards

The Content Group - Cards component is used to present information through a group of cards with each acting as a call to action that drives to additional or supporting destinations. It is suitable for adding concise buckets of content and links to a long-form reading experience.

Overview

Content Group - Cards pairs a section heading, optional body copy and CTA with a card group.

Formatting

Anatomy

Accordion anatomy diagram
  1. Headline
  2. Body copy
  3. CTA 
  4. Card Group

Variations

Card Types

Content Group - Cards can display either icon cards or media cards. Please note that only one type of card can be used within a single content group.

Use the same card type for all cards within a single card group

Use the same card type for all cards within a single card group.

Don't mix card types within the same card group.

Don't mix card types within the same card group.

Cards Per Row

Cards per row dictates the number of cards in a row. Sometimes this can be adjusted based on total card number or breakpoint to avoid orphaning single card in the last row.

Note: Card Groups should always contain a minimum of two cards. Consider using another component if you only need to highlight a single item.

Large and Medium Breakpoints

On Large and Medium breakpoints, cards can be displayed in columns of two, three, or four.

Accordion anatomy diagram

Small and X-Small Breakpoints

On Small breakpoints, cards are presented in a two-column layout. On X-Small breakpoints, all cards stack within a single column.

Accordion anatomy diagram

Example of how a card group containing three cards responds to various breakpoints.

Guidelines

Card Height

The height of the largest card in a group will determine the height for all cards.

Accordion mouse interaction diagram

All cards within a card group should be the same height, as determined by the largest card in the group.