Tiles are presentational components, useful for presenting consequential information in a compact, consistent format.
Overview
Tiles can contain supportive icons, a heading
, and a description
, and offer support for slotted, non-interactive content.
Usage
- Text layouts
- Descriptive navigable links
Sample
Best practices
While visually similar to the Card, a Tile has distinct capabilities and intended use cases.
A Tile is a single focusable element and should not contain slotted interactive elements, whereas Cards may contain one or many individually focusable elements.
![Correct Tile Select groups](/calcite-design-system/static/tile-do-groups-f66cde570cb88f5ae87578d4d9edcf46.png)
![Avoid Tile Select primary actions](/calcite-design-system/static/tile-avoid-primary-actions-dc8c9394c5237bf9a895ba757e037d16.png)
Writing and copy
Text for Tiles should be on the shorter side, and as concise as possible.
- Use sentence case for heading and description
- End description with proper punctuation
- Avoid forming questions in Tiles
- Recommended heading character maximum: 50
- Recommended description character maximum: 175