Skip to main content

Cards

Cards provide a set of content which acts as an entry point to more detailed information.

Specifications

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

  • Card Container (with 1px border, 2px radius, 16px padding). Hover state with Level 3 shadow) required if card is a link
  • Image (top of card, no padding) optional
  • Title optional
  • Subtitle optional
  • Card Text optional
  • Button optional
  • Chips optional
  • Lists optional

  • Card dimensions are based on its content and the container in which it resides.
  • Apply custom heights and width to meet product requirements.

card example

card example

Do keep cards consistent for easy scanning. Don't organize content in different ways when grouped together.

Behaviors

  • Cards should only contain a single action, which is tied to a UI component within the action element or to the whole card (using a card as a link).

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 September 27, 2024.