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.
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.
Cards can have the following transitions and interactions:
- Cards themselves can be tapped
- Cards can be dragged
- 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.
Was this page helpful?
Thanks for your feedback!