A card is a container element that visually represents a distinct unit of content within a user interface.
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.
- Container: Background container that organises the information.
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.
Cards can be used as draggable items. When the card is grabbed, the pointer changes and the drag state is activated.
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.
Outlines the atomic level interactive elements for the component.
Here is an example of a Card in a left-to-right context:
Here is an example of a Card in a right-to-left context: