Tile

Groups actionable content to make it easy to scan.

GuidelinesReact

When to use

  • You have an action associated with a section of content.
  • Your structured content should lead to the next step in the user flow.

When not to use

  • With information without a related action—use a card.

Component status

Figma

React

iOS

Android

Planned
Released
Released
Released

Content structure

Title: sets the context for the tile and works best when short; chevron: indicates the interaction for the tile (like an external link); icon: optionally visually supports the tile focus; description: optionally provides more context and works best as a one-liner; header: displays whatever content you want to give it.

Behavior

Make the action clear

Tiles should be associated with a single action the user can take. You don’t want surprise users by jumping them into a different context without warning.

So if your action is, say, taking users to a different site where they can read more information, provide icons and other cues to make it clear what will happen.

Do

Show the action.

A tile with two icons showing that the tile leads to a link and the text 'Read about progressive disclosure'.

Don't

Don’t leave users guessing what might happen.

A tile with only the text 'Read about progressive disclosure'.

Content

Keep descriptions for extra information

Users sometimes skip descriptions so make sure there’s nothing essential in them. If you need to say something really important, use an informational alert.

Look & feel

Maintain visual hierarchy

Tiles are open to any content you want to put into them. If you're putting a heading into a tile, we recommend using the tile title, which was designed for this purpose. Or at least use the same style of heading to keep the overall visual hierarchy.

Using different styles can create conflicting visual messages, especially if you're using multiple tiles on the same screen.