Cards

Cards are customizable content containers of similar structure that group related information (e.g. expense reports, invoices, apps, etc.) in a flexible-sized container. They come in two types: clickable and non-clickable.

Design Usage

Cards are best suited for cases when users browse for information, rather than search. They must be contained within a CardDeck. Sizing of cards is controlled by the CardDeck.

Use:

  • As a container for scannable information pertaining to a single subject
  • As a portal to more detailed information
  • To make up a dashboard or dataset

Don’t use:

  • To create new object (see CardCreate)
  • As a wrapper around a section (see Panel)
  • To define sections of a page

Anatomy

A Card consist of a container, content, and an optional header or footer. The content should be arranged hierarchically to help the reader scan the card quickly.

Card Anatomy

  1. Container
  2. Header [optional]
  3. Content
  4. Footer [optional]

Container

Card containers can be clickable or non-clickable (see Types). The sizing of cards is controlled by the CardDeck and both height and width can be customized. All cards within a CardDeck must have the same dimensions. The default size of a card is 268px wide by 214px high with an internal padding of 16px.

Header [optional]

Headers are optional elements spanning the top of the card. They can denote status (see Types) or provide other high-level information such as dates or titles. Headers should not contain more than one line even when localized.

Footers are optional elements spanning the bottom of the card.

Text

Card messages should be concise and pertain to a single subject. Test text to make sure that it fits the dimensions of the card; overflow text should be truncated. Left alignment is preferred.

Button

Buttons can be added to non-clickable cards (see Types).

Media

Cards may contain media such as images and charts.

Behavior

Cards in a CardDeck are responsive to browser width and will wrap.

They should not display additional information on hover. They are not scrollable nor closable.

  • Interaction Cards can be clickable or non-clickable (see Types).

  • Position The alignment and positioning of cards are determined by CardDeck. They can be left aligned, centered, or justified.

Types

Clickable vs Non-Clickable

Clickable cards allow users to click anywhere on the card to view additional details. Because of this, the card itself will receive focus, so they cannot contain additional interactive elements (e.g. fields, buttons, links). They will display a drop shadow and hover state by default. Non-clickable cards should contain interactive elements that will each receive focus. Use the onClick property to define a callback function and to make a card clickable.

Don't: Add buttons to clickable cards

Status

The status types of cards refer to the styling on the header for each card. Use the type property to define the desired status.

  • Default
  • Success
  • Danger
  • Info