Skip to main content

Card

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

Overview

The purpose of cards is to provide a cohesive and structured way of displaying content. Cards are interactive, allowing users to click or tap for more details or to perform specific actions related to the displayed item.

Cards are designed to present concise and focused information organised in a visually appealing manner. They are commonly used to showcase individual items, such as products or articles, and are usually arranged in a grid or stacked layout.

A card container with text and an icon inside of it.

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.

Variations

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.

Padding of the card.
Internal spacing within a card.

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.


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

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.

Resources

Stable
Stable
Beta
Stable
Stable
iOS JustUI [UI Kit]
TBC
iOS PIE [SwiftUI]
TBC
Android PIE [Compose & Views]
Beta