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.

Dos and Don’ts

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

Container: Background container that organises the information.

Variations

Default

Outline

Inverse

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

Behaviour

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

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.