Tile Group

Tile Group can be used to organize multiple Tile components within a layout.

Overview

Tiles are rectangular components used to quickly layout information and can also serve as a navigation tool. They can contain supportive icons, a heading, and a description.

Usage

• Selection workflows
• Organization and layout of Tiles
• Representing content items within a group

Sample

Best Practices

While similar to the Card Group, a Tile Group has distinct capabilities and intended use cases.

Tile Groups often contain a known quantity of Tiles, whereas Card Groups can be comprised of a variable quantity of Cards.

NoteIn future releases, the Tile Group component will gain support for selection functionality, which is currently available through Tile Select Group.When parity is reached between the components, Tile Select Group will be deprecated.

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 selectionMode is not "none", selects the focused calcite-tile.
Enter	When a calcite-tile is focused, when selectionMode 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.

API reference

Properties

Slots