Skip to main content

Card

A card is a container element that visually represents a distinct unit of content within a user interface.

Dos and don'ts

Do
  • Use a card when the entire container is clickable.
  • Use a card to display content and actions on a single topic.
  • Card contents should be easy to scan for relevant and actionable information.
Don't
  • Don’t use a card if the container doesn’t need to be clickable, find an alternative component.
  • Don't use a card for selection control, use radio groups, checkboxes or list items instead.

Anatomy

Anatomy of a card.
  1. Container: Background container that organises the information.

Variants

Default

A default card, which has a light background.

Outline

An outline card, which has a light background and an outline.

Inverse

An inverse card, which has a dark background.

Inverse outline

An inverse outline card, which has a dark background and an outline.

Content

Slot available

The card container comes with a slot, so you can add any content you like to the card. For the internal spacing of the card container, make sure to use PIE spacing tokens. You can find more information about these tokens in the spacing documentation.

Find out more about using the slot in the Figma slot guide.
Padding of the card.
Internal spacing within a card.

Overrides

Annotated examples of the elevation and border colour overrides available in the card component.
  1. Elevation: It can be removed or replaced with another elevation token as needed.
  2. Border colour: It can be replaced with another border colour token as needed. Ensure the chosen token provides sufficient contrast against the background on which the card is placed.

Behaviour

Cards can be used as draggable items. When the card is grabbed, the pointer changes and the drag state is activated.

Behaviour of a card when it is being dragged.

Interactions

Drag on mobile

Mobile devices don't have a hover cursor, so dragging actions might not be the most intuitive choice on mobile screens. If you're using a draggable card in your mobile designs, make sure to provide clear context and guidance to the user.

Use when the entire card is clickable

Use cards only when the entire container is clickable and triggers an action, such as opening details or navigating to another page. If only elements within the card (such as buttons, icon buttons, or avatars) are interactive, use a standard container or another suitable component instead.

Do not use a card if no interaction is required.
Do
Example of four card components in that are interactive and clickable.
Don't
Example of a card component being misused as it contains an input field and a button.

Use a card when clicking anywhere on it navigates the user to another page.

Don’t use a card when only the button inside the card is clickable and the rest of the card is not interactive.

Do not use cards for selection

Cards are designed to present content and actions, while selection components are designed to capture a user's choice. Using cards for selection can make the interaction less clear and introduce unnecessary complexity.

Don't use the card component for selections, use the radio group, checkbox or list item components instead.
Do
Example of four card components that are interactive and clickable.
Don't
Example of a card component being misused as it contains an input field and a button.

Use list items with form selection variants and clear selected/unselected states.

Don’t use cards to present selectable options.

Interactive states

Default

Default state of a card.

Hover

A card that is hovered.

Active

A card that is active.

Focus

A card that is focused.

Drag

A card that is being dragged.

Disabled

A disabled card.

Examples

LTR examples

Here is an example of a Card in a left-to-right context:

A left-to-right example of a card being used on a menu page.

RTL example

Here is an example of a Card in a right-to-left context:

A right-to-left example of a card being used on a menu page.
Back to top