Cards are presentational surfaces used to house data or information representing an entity, asset, or item.
Overview
Cards are most often presented in a Card Group. An individual Card may contain details or information about an instance within a set. Because Cards are most typically presented in groups, they are intended to be visually consistent and predictable in their layout and content.
Cards offer a variety of slots to accommodate various layouts.
Use the heading and description slots to provide a consistent text lockup to represent the content of the Card. Use the thumbnail slot to provide a visual representation of the content. The footer-start and footer-end slots can be used to provide primary and supplemental actions related to the Card. If needed, additional content can be placed in the default slot.
Usage
- To represent individual items in a set of content
- A snapshot of content representing a layer, map, or item
- A succinct preview of an entity or asset
Sample
Best practices
While visually similar to the Tile, a Card has distinct capabilities and intended use cases. Cards may contain one or many individually focusable elements, whereas a Tile is a single focusable element and should not contain any slotted interactive elements.
Comparison
Recommendations
Because Cards can contain one or more focusable element, they are well suited for representing a set of items or entities. Cards may contain a variety of content, including links to one or multiple associated views or pages, images, and actions.
It is important to keep groups of Cards visually consistent within a view or workflow. For example, avoid mixing Cards that have images and Cards that do not have images within a single Card Group. Ensure each Card within a group has a consistent visual structure and similar slotted content.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component. |
Tab and Shift | Moves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component. |