- Use a card to display content and actions on a single topic.
- Card contents should be easy to scan for relevant and actionable information.
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
- 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.
Interactive States
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:
RTL Example
Here is an example of a Card in a right-to-left context:
Resources
| Stable | |
| Stable | |
| Beta | |
| Stable | |
| Stable | |
 iOS JustUI [UI Kit] | TBC |
 iOS PIE [SwiftUI] | TBC |
 Android PIE [Compose & Views] | Beta |
