Cards
Cards deliver information and interactions in a more condensed way. This guide explains their usage.
-
Usage
-
Examples
-
Related Component
-
Download
Usage
Content
Cards include information and interactive elements, such as images, texts, links, buttons, or icons, about a single subject. Using a card style on your user interface can help users quickly understand how to interact with an element.
Single-select or multi-select cards
Single-select cards and multi-select cards are interactive elements similar to radio buttons and checkboxes. If a card offers multiple choices, use checkboxes. If it offers only one selection option, use radio buttons.
Cards are always fully clickable, meaning that a click (or tap) anywhere inside the card will activate it. For single-select cards, consider using a design in which the card outline turns red when activated.
Grouped cards
Feel free to group cards if they contain similar content and if you want to separate them from another group of cards with non-similar content.
Examples
