Key Points
- Tiles are cards where the whole container UI is the clickable area
- Tiles can only ever trigger a single action; use a card for multiple actions
- For tiles on the Web, display a text link at the bottom of the container to indicate the card is clickable
- For tiles on the React Native platform, display a caret icon in the top right of the container to indicate the card is clickable
- Tiles have states, including a selected state
- Tiles follow the same structural rules as cards
- Do not use custom surface colours, they will conflict with the states
- Tile components for Web have a text link, on React Native, only an icon
Usage
Layout of tiles, simple on the left and with media on the right
Tiles are navigation elements. They navigate users to other pages or sections. If an action needs to be triggered, use a card with a single button.
Tiles can be used standalone or as part of a collection.
The distinguishable feature of a tile is that it contains a text link at the bottom of the container. Adjust the link text to make the destination clearer to users.
Hit Area
Tiles use the whole container as the hit area
Example of the hit-state on a tile component
Content Areas
Tiles follow the same structure as cards but include a content area or slot that can be altered as needed.
Slot areas should adhere to the same overall principles of hierarchy and spacing to display content effectively.
Single Action Cards versus Tiles
Use cards with single buttons when triggering an action, e.g. save or delete. Use cards if the number of actions may increase based on the card's state or usage.
Tiles will always be used for navigational actions.
States
Tiles have states to indicate the status of the interaction
Illustration of the different tile states
Component Library Differences
The web tile includes a "Read more" text link, while React Native uses a right arrow icon to simplify the layout in line with native platform guidelines.
Tile differences per platform