Tile Group can be used to organize multiple Tile components within a layout.
Overview
Tile Group supports workflows and patterns using more than one Tile. Tiles within the Tile Group are navigable via keyboard are grouped visually. Through the use of opt-in selection modes, Tile Group can facilitate interactive workflows with Tiles.
Usage
- Selection workflows
- Filtering patterns
- Primary navigational actions
- Representing a known, small quantity of items
Sample
Best Practices
While similar to the Card Group, a Tile Group has distinct capabilities and intended use cases.
Tile Groups most often contain a known quantity of Tiles, whereas Card Groups can be comprised of a variable quantity of Cards.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | When a calcite-tile is focused, moves focus to next calcite-tile If the current focus is the last calcite-tile, focus will leave the component. |
Tab and Shift | When a calcite-tile is focused, moves focus to the previous calcite-tile. If the current focus is the first calcite-tile, focus will leave the component. |
Arrow left | When a calcite-tile is focused, moves focus to the previous calcite-tile. If the current focus is the first calcite-tile, focus will return to the last calcite-tile. |
Arrow right | When a calcite-tile is focused, moves focus to the next calcite-tile. If the current focus is the last calcite-tile, focus will return to the first calcite-tile. |
Space | When a calcite-tile is focused, when selection is not "none", selects the focused calcite-tile. |
Enter | When a calcite-tile is focused, when selection is not "none", selects the focused calcite-tile. |
Home | When a calcite-tile is focused, moves focus to the component's first calcite-tile. |
End | When a calcite-tile is focused, moves focus to the component's last calcite-tile. |