A container providing at-a-glance information and easy access to more details.
Elements of a card can include titles, subheadings, charts, media, metadata, and notifications. They are flexible and customizable to organize your content.
- 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
- 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.
A grid of cards can provide a simple set of easy to navigate items. In this example, the cards are a uniform, homogenous collection of services, which can be browsed and easily digested. A click on card leads to that service's view and allow the user to explore further.
- 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.
- 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.
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.
When images are featured on cards, they have a full ‘bleed’ as well as heirachical text to give additional context for the content.
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.