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