Overview
When to use
- When checkboxes, radio buttons or links need more visual weight
- When you want to add a description to checkbox, radio button or link.
Behavior
- The entire card is tap-able / clickable
- When used as navigation, the action happens immediately after tap/click
Related components
|
|
Checkbox (group) |
Checkbox (single) |
|||
|---|---|---|---|---|---|
|
Number of options |
Multiple |
Multiple |
2 (on/off) |
2 (on/off) |
2-4 |
|
Number of selections |
1 |
0 - all |
1 |
1 |
1 |
|
Default selection |
Yes (usually) |
No |
Yes |
Yes |
Yes |
|
Relationship of options |
Mutually exclusive |
Independent |
Mutually exclusive |
Mutually exclusive |
Mutually exclusive |
|
Selection occurs |
After confirmation |
After confirmation |
After confirmation |
Immediately |
Immediately |
Content
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.
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
Spacing
Proper spacing is especially important with navigational and radio button options, as it reinforces the idea that options are mutually exclusive.
- 16px between cards
Resources
(internal only)