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


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.


  • Text layouts
  • Descriptive navigable links


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



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