Tile
Calcite Tiles are visually prominent components that can be used as copy containers or links.
Overview
Tiles are simple rectangular components used to quickly layout information and also serve as a navigation tool. They can contain supportive icons, a heading, and a description.
Consider Tile Select for a selectable version of this component.
Usage
- Text layouts
- Descriptive navigable links
Sample
Best practices
Below are important guidelines on using the Tile component.
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
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| active | active | The active state of the tile. | truefalse | |
| description | description | The description text that appears beneath the heading of the tile. | undefined | |
| disabled | disabled | When true, prevents interaction. | truefalse | |
| embed | embed | The embed mode of the tile. When true, renders without a border and padding for use by other components. | truefalse | |
| heading | heading | The heading text that appears between the icon and description of the tile. | undefined | |
| href | href | The (optional) url for the tile. (Only applies when embed is set to false) | undefined | |
| icon | icon | The icon that appears at the top of the tile. |
Slots
| Name | Description |
|---|---|
| content-end | A slot for adding non-actionable elements after the tile content. |
| content-start | A slot for adding non-actionable elements before the tile content. |