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

AnchorNeed to know

  • Tiles draw attention to featured items.
  • All tiles have a title.
  • There are three types of tiles - InformationTile, MultiActionTile, SingleActionTile (not built)

Visuals

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

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

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.

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: