Card

Cards are a self-contained unit of information, usually as part of a feed or series of similar content. Cards have a dynamic range of modifiers that allow text-only, text and illustration, and photography. All cards have an option to include text links or buttons as a primary action. The entire card can become an active click-target.

Examples

Card with image and call to action

Show Source

Example card

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Button Label

Card with thumbnail and call to action

Show Source

Example card

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Button Label

Overrides

Additionally, you can fully customize any part of the Card through the overrides prop. The Card consists of multiple sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector:

Action

Body

Contents

HeaderImage

Root

Thumbnail

Title

Wrapper

Example card

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Button Label