Content card
Compact displays that summarize or direct users to more information.
Content cards are stylized containers that group elements and actions for a single, related subject. As one of the most customizable components, they can be tailored to meet specific user needs or preferences. Content cards are often displayed within a page’s content area and provide a preview or summary of another page’s content to encourage users to click-through for more details. They are often presented in multiples, offering various topics or aspects for users to explore.
Also known as: Tile, card, snapshot, spotlight.
Anatomy
A. Card (required): Container featuring related content, icons, images, and actions.
B. Icon (optional): Static icon enhancing or communicating the meaning of the card.
C. Card title (optional): Brief text summarizing the subject of the content card. Can be used with or without the subtitle.
D. Subtitle (optional): Additional text communicating more details. Can be used with or without the card title.
E. Body text (optional): Brief message detailing important information about the content card.
F. Button or link (optional): Text button and/or link that prompts an action or directs users to relevant resources.
G. UI icon button (optional): Visual representation of an action that doesn’t require text to convey meaning.
H. Image (optional): Graphic, illustration, or photography representing or communicating the meaning of the card.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Default | To provide information and actions related to a single subject. | To display large amounts of information or information that isn’t related. As a Dialog or modal, as content cards do not float over the main content area of a page. |
| Clickable | To make the entire card selectable. | If no additional information or actions are associated with the card. |
| Compact | To save space on small screens. | For detailed information that’s difficult to read in a small format. |
| Dashboard | To represent simple data visualizations. | For complex or interactive data visualizations without customizing. While the dashboard card can serve as a starting point, it may require additional design iteration to represent more intricate data visualizations. |
Best practices
- Use consistent elements for cards within the same layout or content area to help users scan and understand information.
- Establish a clear visual hierarchy within the container to enhance scannability and readability.
- Use visuals such as icons, images, or illustrations to enhance the meaning and aid in quick comprehension of the content.
- Avoid cluttering the card with too many elements or actions. Keep the design simple and focused on the primary task.
Icons and images
Icons and images add visual interest and enhance the meaning of content cards. By integrating relevant icons and images, you can quickly and effectively convey the essence of the content.
- Avoid overloading a card with too many elements that detract from the main message.
- Always ensure visuals align with the content and support the user’s understanding.
Icons
Icons can be used to add visual interest or enhance the meaning of the card.
- Use universally recognized icons to ensure comprehension for all users.
- Use one icon per card to maintain simplicity and avoid confusion.
Category icons
Icons and labels can be used to categorize specific subjects under a broader subject.
- Use distinct and descriptive category names and icons for easy identification.
- Use one icon per category card to ensure it clearly represents and differentiates each category.
UI icon buttons
UI icons buttons visually represent an action without text. They’re typically used for actions related to the entire card.
- Ensure icons clearly and intuitively indicate the action they represent without accompanying text.
- Make sure UI icons are large enough to be usable, especially on touch devices.
Images
Images such as illustrations and photography add visual interest and meaning to content cards.
- Only use images when relevant or to enhance the understanding of the content.
- Avoid using intricate illustrations that may not be clear on smaller screens.
Dividers and borders
Dividers and borders can be used to enhance the visual appeal and readability of content-heavy cards by breaking down dense information and improving organization.
Content dividers
Dividers can be added between content to break up sections or give the card a sense of hierarchy.
- Use dividers to provide a clear separation and organize information for easy consumption.
- Place dividers in consistent areas across content cards used in your experiences.
Card borders
Borders can be added to the bottom for emphasis or as a hover state to indicate the entire card is clickable.
- Use color to further distinguish multiple cards in a group, such as category cards.
- Use bottom borders consistently across content cards used in your experiences.
Card collections
Content cards are typically presented as a grid or collection, reading left right, with each card the same size. For more complex grids, like the one below, reading order should follow a left to right, top to bottom pattern. The layout of these groups can influence user perception, so they should be organized for easy scanning and understanding.
- For left-to-right languages, the order should go from top left to bottom right.
- For right-to-left languages, the order should go from top right to bottom left.
Behaviors
Clickable card elevation
On hover, a clickable card may transition from a small to medium elevated surface. The default surface for content cards has a 1px border, small elevation, and a background of Surface 1. Surfaces are intended to be customizable to the individual needs of an application, as styling needs will change based on number of cards and desired emphasis.
Platform considerations
Responsive scale and reflow
Content cards scale to adapt to different screen sizes, and their position and alignment can also change. Content card layouts may be fluid or fixed width. When used in a fluid grid, a card’s width can adjust across grid columns and rows.
Content will also resize and reflow accordingly. Some content may not be appropriate to resize due to limitations or visual distortion. Learn more by visiting Responsive grid system.
Fixed grid
Fluid grid
Do Stack cards vertically on Mobile, not horizontally, to accommodate narrower screens.
Don't Use more than 2-columns for content cards on Mobile due to the limited screen width on mobile devices.
