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 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.

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

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.

Interactive states

Default

Default state of a card.

Active

A card that is active.

Disabled

A disabled card.

Examples

Outlines the atomic level interactive elements for the component.

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