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.
Recommendations
It is important to keep groups of Cards consistent in your application. For example, avoid mixing Cards that have images and Cards that do not have images within a Card Group. Ensure each Card within a group has the same visual structure, slotted content, and metadata.
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. |