Tile

Tiles are visually prominent components that can be used as copy containers or links.

Overview

Tiles are rectangular components used to quickly layout information and can 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.

Do use Tiles in groups for visual hierarchy.

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

Properties

Slots