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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Below are important guidelines on using the Tile component.

Correct Tile Select groups
Do use Tiles in groups for visual hierarchy.
Avoid Tile Select primary actions
Avoid using Tiles for primary calls to action.

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

calcite-tile
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

The active state of the tile.

booleanA boolean property should be present, or not
truefalse
descriptiondescription

The description text that appears beneath the heading of the tile.

optional
stringA custom string
undefined
disableddisabled

When true, prevents interaction.

booleanA boolean property should be present, or not
truefalse
embedembed

The embed mode of the tile. When true, renders without a border and padding for use by other components.

booleanA boolean property should be present, or not
truefalse
headingheading

The heading text that appears between the icon and description of the tile.

optional
stringA custom string
undefined
hiddenhidden

The hidden state of the tile.

booleanA boolean property should be present, or not
truefalse
hrefhref

The (optional) url for the tile. (Only applies when embed is set to false)

optional
stringA custom string
undefined
iconicon

The icon that appears at the top of the tile.

optional
iconAccepts a Calcite UI Icon string

Slots

NameDescription
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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.