Tile
A visually interesting item in a list consisting of a card, visual, title metadata, and call to action.
Also known as:
CardGrid itemFeatured item
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Field
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio Field
- Radio Group
- Rich Text Editor
- Search Field
- Select
- Slider
- Split Button
- Table
- Tabs
- Tag
- Text Area Field
- Text Field
- Tile
- Tile Grid
- Toast Notification
- Toggle Switch Field
- Tooltip
- Well
Need to know
- Tiles draw attention to featured items.
- All tiles have a title.
- There are three types of tiles - InformationTile, MultiActionTile, SingleActionTile (not built)
UI Kit
To keep in mind
SingleActionTile (not built)
- Entire tile is a single click zone for performing a single action.
MultiActionTile
- Similar in terms of content to SingleActionTile, but with multiple actions and click zones.
- Supports default action, secondary action and flip action (which shows additional context and optional secondary action).
InformationTile
- For display of hero data.
- Generally has either no action, or a single action to flip (which shows additional context and optional secondary action).
Layout
- Max. 4 per row in 1392px area
- See Tile Grid
Anatomy
MultiActionTile
- Title (required)
- 1-3 words
- Metadata (optional)
- Key information to surface that helps people decide between items
- Information (optional)
- Object with three parameters: text, primaryAction (optional), secondaryAction (optional)
- Causes Information IconButton to appear in upper right corner. When clicked the backside of Tile is revealed.
- Text params is rendered as a paragraph, primaryAction and secondaryAction action rendered as buttons.
- Children (optional)
- Placed in middle of Tile between footer and title content.
- Supplementary footer (optional)
- 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):
InformationTile:
- Title (required)
- 1-3 words
- Metadata(optional)
- Key information to surface that helps people decide between items
- Information (optional)
- Object with three parameters: text, primaryAction (optional), secondaryAction (optional)
- Causes Information IconButton to appear in upper right corner. When clicked the backside of Tile is revealed.
- Text params is rendered as a paragraph, primaryAction and secondaryAction action rendered as buttons.
- Children (optional)
- Placed in middle of Tile between footer and title content.
- Supplementary footer (optional)
- Positioned at bottom of Tile.
Focus indicator:
- See Interaction states guidelines for focus indicators.
- On keyboard navigation:
- On a single action tile show a focus indicator around the whole tile.
- On a multi-action tiles show a focus indicator on the individual interactive elements.
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: