Key information to surface that helps people decide between items
On hover: Extra information on hover that is not critical and can be found elsewhere in the platform
Persistent: Replacing the illustration, a persistent description shows meaningful information that might not be found elsewhere in the platform
Adds visual interest
Preferred: The entire card is clickable and leads to the same place as the call to action default button.
Optional: If there need be other clickable areas inside the card such as a link in the description, the entire card is not clickable. Instead, only the links and buttons are clickable.
People try to discern meaning behind different background colors. Try to stick to one color on a page or within a section.
Call to action default button (required):
Consider if the label needs to be different across items, especially for people using screen readers. If the labels are the same, they might also need ARIA tags to indicate which card title the button is labeled by or description it’s described by.
Secondary control action button (optional):
Aim for 1 word only
Expand and collapse
Hover and reveal
On hover, reveal more supplementary content. This is useful when the user may not have been able to make a decision from the information that’s immediately available.
Slide fade content up and down when revealing and hiding supplementary content.
Max. 4 per row in 1080px area
When to use and when not to use
When to use
Use tiles for visually interesting items that we want to highlight or have featured.
Use tiles to help people choose between items.
When not to use
For a single item, use a guidance block instead.
For items without much visual interest, use a list instead.