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
- Display of key content or information
- Selection workflows
- Primary navigational actions
Sample
<calcite-tile icon="3d-glasses" heading="Special viewing glasses"
description="Great for eclipses and optical illusions"></calcite-tile>
Best practices
While visually similar to the Card, a Tile has distinct capabilities and intended use cases.
Comparison
Recommendations
A Tile is a single focusable element and should not contain slotted interactive elements, whereas Cards may contain one or many individually focusable elements. Because the entire element is interactive, avoid placing focusable elements within the Tile to ensure users can interact with the Tile as a single entity.


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 | Default |
---|---|---|---|---|
active | active | When true , the component is active. | boolean | false |
alignment | alignment | Specifies the alignment of the Tile's content. | "center" | "start" | "start" |
description | description | A description for the component, which displays below the heading. | string | |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
embed | embed | true , renders without a border and padding for use by other components. | boolean | false |
heading | heading | The component header text, which displays between the icon and description. | string | |
href | href | When embed is "false" , the URL for the component. | string | |
icon | icon | Specifies an icon to display. | string | |
iconFlipRtl | icon-flip-rtl | When true , the icon will be flipped when the element direction is right-to-left ("rtl" ). | boolean | false |
label | label | Accessible name for the component. | string | |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selected | selected | When true and the parent's selectionMode is "single" , "single-persist"', or "multiple"`, the component is selected. | boolean | false |
Slots
Name | Description |
---|---|
content-top | A slot for adding non-actionable elements above the component's content. Content slotted here will render in place of the icon property. |
content-bottom | A slot for adding non-actionable elements below the component's content. |
content-start | content-top slot instead. A slot for adding non-actionable elements before the component's content. |
content-end | content-bottom slot instead. A slot for adding non-actionable elements after the component's content. |
Styles
Name | Description |
---|---|
--calcite-tile-accent-color-press | When the parent calcite-tile-group has a selectionMode that is not "none" , specifies the color of the component's selection elements, such as the radio, checkbox, and border. |
--calcite-tile-background-color | Specifies the component's background color. |
--calcite-tile-border-color | Specifies the component's border color. |
--calcite-tile-corner-radius | Specifies the component's corner radius. |
--calcite-tile-heading-text-color | Specifies the component's heading text color. |
--calcite-tile-link-color | When href is present, specifies the component's link color. |
--calcite-tile-shadow | Specifies the shadow around the component. |
--calcite-tile-text-color | Specifies the component's description and icon text color, but not the heading text color. |
--calcite-tile-link-text-color | Specifies the component's link text color. |
Events
Name | Description | Behavior |
---|---|---|
calciteTileSelect | Fires when the selected state of the component changes. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |