Skip to main content

Card

Description​

Cards provide a visible, unifying container for content and actions related to a single topic and are useful for presenting a topic summary.

Size​

Cards have a minimum height and width of 80px x 80px. They may be any height and width (subject to minimums), and any aspect ratio needed. They can be flexible and responsive to viewport breakpoints.

Usage​

Use cards to display the key content and actions related to a topic. Avoid displaying too much content in a card. Instead, use cards to present a summary and provide navigation to a more detailed view.

Cards are intentionally flexible. They can contain text, media, dynamic data, design elements, UI controls, or actions. They are usually interactive and may contain multiple nested actions.

Cards can be arranged in rows, or columns, a grid, or carousel.

Coming Soon: Examples of different arrangements

Styling​

Cards are rectangular containers with a solid background, visible border, and 16px padding on all sides. Titles are optional and left-aligned when used.

Cards have a body for any content needed and an optional footer to display actions.

When cards contain media, this can be top-aligned, left-aligned, or as a background. Media can have an optional margin with optional 8px padding.

Body​

Cards always have a body for content with these defined rules:

  • Titles are optional and left-aligned when used
  • Titles should be the largest text on the card
  • Body surface color cannot have an opacity

Footer​

Cards may have an optional footer for one or more actions. The footer has these defined rules:

  • The footer is separated from the card body by a divider
  • The footer has the same surface color as the body
  • It is 40px tall and has the same width as the card body
  • It only contains actions (text, icons, or both)
  • Up to two actions can be displayed as text, additional actions can be nested in a menu.
  • Text actions are left-aligned. (EG: View details)
  • Icon actions are right-aligned. (EG: icon that allows for menu, the icon is separated from text links)

Options​

Cards have a default surface color, border color, border thickness, and padding. These default attributes can be changed as needed. Designers and developers can optionally:

  • Change the surface color (must be opaque)
  • Change the border color and thickness, or hide the border
  • Reduce padding to 8px in small, horizontal cards
  • Display content and actions as needed
  • Display media top-aligned, left-aligned, or as a background (e.g., a container for an image)
  • Display an optional margin around media

Coming Soon: Examples of different options

Changing card defaults should be done with a clear rationale such as the needs for branding, state, space, or usage context.

Interaction​

The entire card body can be a link to view additional details. Additional interactive elements can be nested in the body and/or provided in the optional footer.

Coming soon, exmaples to illustrate flexibility

Best Practices​

Cards should always follow the rule “one card, one concept.” While multiple design elements may exist to support this, the focus of these design and text elements should be focused on a single topic or idea.

Cards offer entry points into further details, and so should be written as concisely as possible for users to scan.

Cards should offer a linked entry point for further details.

Headings, when used, should set clear expectations about the purpose of the card.