Card
Card is a flexible container for grouping small chunks of related content.
Developer Documentation
Information on how to implement this component is available for the following technologies.
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.
Developer Documentation
Information on how to implement this component is available for the following technologies.
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.
Developer Documentation
Information on how to implement this component is available for the following technologies.
Highlighted Header
Highlighted Header Card supplies a small burst of information that draws focus to its header.
Developer Documentation
Information on how to implement this component is available for the following technologies.
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.
Developer Documentation
Information on how to implement this component is available for the following technologies.
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.