Components

Cards

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

Cards
  • 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

Related Component

Download

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

Sketch UI Library