Specifications
A Card may contain any of the following elements (with the minimum of one), but they are all optional:
- Card Container (2px radius, 16px padding, with Level 3 shadow) required
- Title optional
- Subtitle optional
- Card Text optional
- Buttons optional
- Icons optional
- Chips optional
- Lists optional
- Images optional
Card layouts may vary to support the content within. The dimensions of a card will depend on the implementation of the card and as well as it’s content and use case. Apply custom heights and width to meet product requirements.
Layout Examples
Card States
Cards can have a default, focus, and selected state. Selected states are optional and should be implemented based on use case. Mobile cards do not have a hover state.
Behaviors
Cards can have the following transitions and interactions:
- Cards themselves can be tapped
- Expand/Collapse
- Cards can be dragged
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.