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
Sketch
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.