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 (with 1dp border, 4dp radius, 16dp padding, Level 2 shadow and pressed is Level 3 shadow).
  • Image (top of card, padding optional)
  • Title (optional)
  • Subtitle (optional)
  • Card Text (optional)
  • Button (optional)
  • Chips (optional)
  • Lists (optional)
Type Example Height
Horizontal

72dp
Vertical

268dp

Note: In-cab sizes only. See mobile patterns (coming soon) for smaller options for in-field.

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).

States

State Vertical Horizontal
Default

Pressed

Focus

Error

Disabled

Note: Focus state uses “global blue.”

OEM Branding

  • Tones of gray are recommended.
  • If using brand colors, avoid using red. It signals an error state.

Cards OEM

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 November 14, 2023.