Elements of a card can include titles, subheadings, charts, media, metadata, and notifications. They are flexible and customizable to organize your content.
What makes up a Card?
- Allows the user to quickly scan and determine if they should engage further.
- Focused and concise information of a single subject.
- Primarily limited to a singular action (like a large button).
- Secondary actions (e.g. clickable icons, anchors, buttons) should be clearly. distiguishable. When applying these use cases, the card no longer should behave as a primary action.
- Aligns to the grid and global edge size for gap, margin, and pad.
- Shape and direction may be horizontal or vertical.
- Can include a footer for additional information.
- Customizable background, border, and elevation.
- Provides a summary preview of information to scan and process.
- Visually group content or distinguish various types of information.
- Organize in a responsive grid or list.
- Card titles should be Text (not Heading) with color
When to Use
- When presenting a collection of high-level pieces of information (e.g. dashboard).
- When presenting a menu of options (e.g. a catalog of available services).
- Best for sets of items which can best be consumed visually.
Cards may be customized to meet the needs of the content they contain. In a dashboard, content is organized and displayed for the user to quickly scan and identify areas which may need for further engagement.
Each card is customizable and clickable (like a large button) allowing users to explore the detail behind the summarized content. Learn more about Dashboard Templates.
- Limit content to under 100 characters or no more than two short sentences.
- Provide a visual hierchy to content.
- Only one idea or subject in one card.
- Differentiate the card from its background using color, border, shadow, or contrast.
- The card typically behaves as a singular action item (like a big button).
- Secondary actions should be differentiated visually and behaviorally.
- Do not include inline links/anchors.
- If a card does not contain an action behavior, do not provide hover feedback.
- If a card contains a secondary action behavior, provide the documented hover feedback on that secondary action only.
- If a card has a singular action behavior, the entire card should be clickable. Provide a hand cursor change and large elevation on hover.
Grid, List, or Table?
- Grid is great for dashboards or when the use case for the cards lend themselves to larger sizes and simple scanning (e.g. service catalog).
- A list of cards is great when you need to display more cards that have simple content but have serveral items (a list of users).
- Consider using list alone, without the card component, when actions required for items are more complex (like multi-select).
- When content needs to be analyzed, sorted, compared and filtered, a table may be more appropriate.
More Examples of a Card
Consider a small, simple card for smaller data sets that can be scanned easily in a list.
Adding footer content can help provide additional information that can provide more context, clarity, or display notification data.
Card with an Image
When images are featured on cards, they have a full ‘bleed’ as well as heirachical text to give additional context for the content.
Card as a Dashboard Element
Card's versatility allows for it to serve dashboard contexts quite nicely. The main content can showcase a key performance indicator and be represented by a wide variety of charts or meters. Ideally the key performance indicator is accompanied by a contextual signal, indicating whether a user should drill into the detail behind the metric's current value.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.