Last Updated on Dec 15, 2022
Tiles are a flexible content container for linking to pages.

Design Principles

  • Tiles can contain text, images, chips, etc., but the whole tile is always clickable. There is only one click action available on a tile. If more is needed, use a card.
  • Tiles are slightly different visually on the web and mobile. On the web, they are simply a more decorative link. They’re helpful when a screen needs to link to page(s), but a button is a bit too inconspicuous.
  • Tiles on mobile are more flexible. They can contain content, but the whole tile must remain clickable. Content inside can not have a separate click target like a button.
  • Tiles can open a link in a new tab or in the same tab.

Do's and Don'ts

Use as a decorative callout to navigate away from the current screen.
Use to group related information or navigation more visually.
Don’t use for anything other than navigation.
Don’t remove the icon on the right that denotes navigation.
Don’t add additional clickable actions inside the tile.