Card
Cards are rectangular containers that can have images, buttons, and other custom content within.
Overview
Cards are containing rectangles that have many slots available to hold your dynamic content. Cards can be handy in creating uniform groups of content for the user to quickly browse or link to other pages.
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 group.
Be mindful of your content's copy length, as Cards are intended to be scannable slices of the content they represent.
Usage
- A snapshot of content for data, documentation, or maps
- A succinct preview of content with links and a description
- Groups of content for scan-ability
- As marketing style visuals to draw focus
Sample
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. |