Card

A card is a container for a few short, related pieces of information. Put simply: it is a fancy hyperlink.

Overview

When to use

  • When the element is navigational
  • For elements with siblings
  • When you want to invite a user to learn more and interact
  • When all content is related

 

When not to use

  • When the entire element is NOT interactive (has a hover, pressed states)
  • When the content will never have siblings
  • When containing unrelated content

 

Cards vs Box

What’s the difference?

  • When the entire element IS NOT interactive: it’s a Box.
  • When the entire element IS interactive: it is a Card and will have hover/active/pressed states.

How are they the same?

  • By default, most content will live in either a Box or Card. If you have questions about your content, reach out to the design systems team.
  • Cards and Boxes have the same styling = the same fill color of Chalk and the border color of Dove. The only difference is Cards will have a hover effect, active and pressed states.

When do you not use either a card or a box?

  • Page titles and subtitles (H1-H3): always live directly on the page. If in a sibling group of 2+, a Card or Box has a title.
  • Tabs: typically live directly on the page
  • Footer content: always lives directly on the page
  • Buttons: can live directly on the page
  • Empty states: can live directly on the page

 

Content

Card title

  • Key information the card offers, what it does or what it means. Note: Cards are related. All sibling cards need to have the same title pattern
    • Examples: Team member’s name, business categories, bank name, bank account type, etc
    • Alternative: equal sentence patterns, like verb + noun (e.g.: card #1 --> streamline your payroll / card #2 --> add new team members)
  • Sentence case + no period at the end
  • Ideal: 1-3 words (15 chars), acceptable: 4-6 words (30 chars). Avoid wrapping as much as possible.
  • Clear, concise, concrete. Key information upfront.

Card subtitle (optional)

Use to give additional information about this card. Focus on clarity rather than a fun tone of voice.

--> Exception: promotional cards/recommendations --> you can add some fun here, but be mindful of keeping it short and clear.

  • Sentence case + no period at the end if just 1 sentence.
  • If 2 sentences, use period for both.
  • Ideal: 4-7 words (35 characters), acceptable: up to 10 (50 characters). Keep it as short as possible.
Do
Card-DoDont-Title-Do
Don’t
Card-DoDont-Title-Dont

 

Placement

Space cards 16px apart.

Card-Example-Placement

 

Resources

(internal only)

Figma

Storybook