Cards deliver information and interactions in a more condensed way. This guide explains their usage.

  • Usage
  • Examples
  • Related Component
  • Download



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.


Related Component


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB