Skip to main content

Cards

Cards contain content and actions about a single subject.

Specifications

A Card may contain any of the following elements (with the minimum of one), but they are all optional:

  • Card Container (2px radius, 16px padding, with Level 3 shadow) required
  • Title optional
  • Subtitle optional
  • Card Text optional
  • Buttons optional
  • Icons optional
  • Chips optional
  • Lists optional
  • Images optional

Card Specifications

Card layouts may vary to support the content within. The dimensions of a card will depend on the implementation of the card and as well as it’s content and use case. Apply custom heights and width to meet product requirements.

Layout Examples

Card Variation

Card States

Cards can have a default, focus, and selected state. Selected states are optional and should be implemented based on use case. Mobile cards do not have a hover state.

Card States

Behaviors

Cards can have the following transitions and interactions:

  • Cards themselves can be tapped
  • Expand/Collapse
  • Cards can be dragged

Card Behavior

Editorial

  • Label: Keep labels one to three words long, if possible, to avoid wrapping.
  • Title: Keep titles one to five words long, if possible, to avoid wrapping. Use title case and capitalize prepositions of four letters or more.
  • Caption: Use full sentences with punctuation, no longer than 40 words if possible. Do not include multiple paragraphs.
  • Action: Follow the editorial guidelines for Buttons, Chips, etc. when using those elements.
  • Metadata: Keep metadata one to five words long to avoid wrapping.
Last updated March 2, 2023.