Developer mode
Opens components on the React tab by default.
Your bookmarks

Tile

Also known as Clickable Card

Groups actionable content to make it easy to scan.

When you have lots of information, organizing it into related groups can help users navigate it all. When a group is connected to a specific action, use a tile to make that fact clear to users.

Tile actions can lead users to the next step in a flow, select something on the page or break the flow with a popover or external link. The actions involve the tile as a whole, so make sure to group the information logically. If you want to group static content without any actions, use a card.

Component status

Figma
Planned
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
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.

Guidelines

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

  # Show the action

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 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 cards on the same screen.

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.

Related components

Card

Tiles present information with a single action applying to the entire tile. For information without a related action, use a card.