Card Group provides consistent spacing, accessible keyboard navigation, and selection modes to multiple Cards.
Overview
Card Group supports workflows and patterns using more than one Card. Cards within the Card Group are navigable via keyboard and are grouped visually. Through the use of opt-in selection modes, Card Group can facilitate interactive workflows with Cards.
Usage
- Selection workflows
- Filtering patterns
- Representing projects within an organization
- Representing content items within a group
Sample
Best practices
While similar to the Tile Group, a Card Group has distinct capabilities and intended use cases.
Card Groups contain an often variable quantity of Cards, whereas Tile Groups contain an often known and smaller quantity of Tiles.
Recommendations
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. Ensure each Card within a group has the same visual structure, slotted content, and metadata.
By default Cards will fill the width of their container. It is the responsibility of the developer to set and manage the width of the Card components - this may vary greatly depending on use case. At times, it may be beneficial to adjust the width of the Card component based on the size of the viewport.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | When a calcite-card is focused, moves focus to the first focusable element slotted within the component, if one exists. If no focusable element exists, focus moves to the next calcite-card. If focus is on the last focusable element within the component, focus moves through the next calcite-card. If the current focus is the last calcite-card, or the last focusable element within the last calcite-card, focus will leave the component. |
Tab and Shift | When a calcite-card is focused, moves focus to the previous calcite-card. If the current focus is the first calcite-card, focus will leave the component. |
Arrow left | When a calcite-card is focused, moves focus to the previous calcite-card. If the current focus is the first calcite-card, focus will return to the last calcite-card. |
Arrow right | When a calcite-card is focused, moves focus to the next calcite-card. If the current focus is the last calcite-card, focus will return to the first calcite-card. |
Space | When a calcite-card is focused, when selection is not "none", selects the focused calcite-card. |
Enter | When a calcite-card is focused, when selection is not "none", selects the focused calcite-card. |
Home | When a calcite-card is focused, moves focus to the component's first calcite-card. |
End | When a calcite-card is focused, moves focus to the component's last calcite-card. |