Also known as:
CardGrid itemFeatured item
Tile
A visually interesting item in a list consisting of a card, visual, title metadata, and call to action.
- Overview
- Autocomplete (not built)
- Avatar (not built)
- Badge
- Button
- Button Group (not built)
- Card (not built)
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider (not built)
- Dropdown
- Empty State
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner (not built)
- Menu
- Modal
- Pagination (not built)
- Popover
- Radio
- Radio Group
- Search Field (not built)
- Select
- Split Button
- Table
- Tabs (not built)
- Tag
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- Tooltip
- Well
Visuals
UI Kit
Examples
To keep in mind
- Anatomy:
- Title (required):
- 1-3 words
- Label (optional):
- Categorizing labels (1-2 words)
- Metadata (optional)
- Key information to surface that helps people decide between items
- Description (optional):
- 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
- Illustration (optional):
- Adds visual interest
- Distinguishes items
- Card
- Clickable area:
- 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.
- Background colors:
- People try to discern meaning behind different background colors. Try to stick to one color on a page or within a section.
- Clickable area:
- Supplementary footer:
- 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
- Call to action default button (required):
- Title (required):
- Interactions:
- Expand and collapse
- TBD
- 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.
- Expand and collapse
- Layout:
- Max. 4 per row in 1080px area
- Aspect ratios:
- TBD
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.
See also
External Links
Here are some examples of other existing design systems: