Cards deliver information and interactions in a more condensed way. This guide explains their usage.
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.
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.