Tile

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
Do use Tiles in groups as categorical identifiers.
Avoid Tile Select primary actions
Avoid using Tiles for user actions.

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

Slots

Styles

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