Cards & Tiles

Cards and tiles are containers which can contain various content nested within their boundaries.

Key Points

Tiles are cards where the whole container UI is the hit area

Tiles can only ever trigger a single action, use a card for multiple actions

There should be a text link visible at the bottom of the container to indicate the card is clickable

Tiles have states, including a selected state

Like cards, they should follow the same structural rules as cards

Do not use custom surface colours, it will conflict with the states

Usage

Tile components

Example of tile structures

Tiles are navigational UI elements, meaning they can only take a user to a destination of the hierarchy. If your usage requires an action to be triggered then 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 is contains a text link positioned at the foot of the container. The microcopy can be adjusted to assist the user on what content they will be taken too.

Tile Examples

The link should be double spaced, 16px, from the rest of the content

Hit Area

Tiles use the whole container as the hit area

Hit State

Whole tile is a hit state

Slot Areas

Tiles follow the same structure as cards but contain a custom area or slot which can be used altered as required.

Slot areas should follow the same overall principles of hierarchy and spacing to display content.

Single Action Cards v Tiles

Use cards with single buttons when triggering an action e.g. save or delete. You should also opt for cards if the number of actions is likely to increase depending on the state or usage of the card.  Tiles will always be used for navigational actions.

Single CTA

Example of a card where the actions could change

States

Tile States

Examples of how each state would display