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.
Placement
Space cards 16px apart.
Resources
(internal only)