Card

Card is a flexible container for grouping small chunks of related content.

Usage

Card provides a way to present information quickly. While flexible in nature, they will typically have a heading and a call to action and be used in groups within a grid.

Guidelines

• The content arrangement inside of a Card is intentionally flexible.
• Card has a maximum width of 425px. Using Card as full-width containers should be avoided.
• The Standout style can be applied to any Card variant.

Variants

Base

Base Card is a simple container for related content. There are no strict guidelines about what can go into a Card, but a clear heading and call to action are encouraged.

Standout

Standout Card is used to give visual priority to a Card. Any Card can have this style, but only one card should use it at a time on the same page.

Highlighted Header

Highlighted Header Card supplies a small burst of information that draws focus to its header.

Teaser

Teaser Card includes an image or illustration and a call to action that can be a Button or a Link.

• When using an Icon in Teaser Card, the content of the Card should be center aligned.
• The Teaser Card element order can be changed, for example, if you’d like the heading to appear above the image.

Anatomy

• The contents of Card are intentionally flexible.
• Card may include a clear heading and call to action.
• Teaser Card must have a heading, image, and call to action.