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 keyboard navigable and visually aligned. 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 often contain a variable quantity of Cards, whereas Tile Groups often contain a known quantity of Tiles.
Recommendations
The Card Group component is intended to be used in conjunction with the Card component. It is up to the consuming application to set and manage the width of the Card component's within the group. 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. |