Tile

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Heading color
  4. Space
  5. Interaction states
  1. Style
  2. Theme
  3. Heading color
  4. Space
  5. Interaction states

Style

A tile is available as a Link tile or Selectable tile. A link tile has two sizes and heading color options; the blue arrow in the bottom right corner helps distinguish it from card. A selectable tile has a consistent style for both the checkbox and radio button variants.

Anatomy

Default link tile with numbers pointing to locations of an image, an icon, text, and a footer
  1. Image
  2. Icon
  3. Title
  4. Heading
  5. Body text
  6. Footer
Selectable tiles with numbers pointing to locations of text, a checkbox or radio button, and a footer
  1. Heading
  2. Form input (checkbox or radio button)
  3. Body text
  4. Footer

Sizes

A link tile is available in Default and Compact sizes. A selectable tile has only one size which is based on the size of a compact tile.

Examples of a link tile, compact tile, and selectable tile to show size differences

Theme

Both the link tile and the selectable tile are available in dark and light themes.

Light theme tiles use a white background, blue or black heading, black text, and a blue arrow icon Dark theme tiles use a dark gray background, blue or white heading, white text, and a light blue arrow icon

Heading color

A link tile has a blue heading by default, but a desaturated variant exists for both light and dark themes. The desaturated heading uses either a black or white heading. A selectable tile has a desaturated heading only and does not have the option for a blue heading.

Examples of a light theme link tile with a blue heading, link tile with a black heading, and selectable tile with a black heading Examples of a dark theme link tile with a light blue heading, link tile with a white heading, and selectable tile with a white heading

Space

Space values remain the same at all breakpoints.

Default link tile and compact link tile with spacers showing padding and margins Link tiles that have full-width and default image sizes with spacers showing padding and margins

Selectable tile

Selectable tile with spacers showing padding and margins

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern. The interaction states of a default link tile are the same for a compact link tile as long as they use the same heading color. A selectable tile does not have an underlined heading to avoid users thinking it contains a link.

Hover

The hover state of a link tile also includes the arrow icon moving 3px to the right.

On hover, light theme tiles have a light gray background, an underlined (and sometimes darker blue) heading, a darker blue arrow icon On hover, dark theme tiles have a lighter gray background, an underlined (and sometimes lighter blue) heading, a lighter blue arrow icon

Focus

Helpful tip

Focus state has the same styles as the hover state, except for the arrow icon animation.

 Focused light theme tiles have a blue focus ring and use hover state styling Focused dark theme tiles have a light blue focus ring and use hover state styling

Active

Only link tiles have an active state. Selectable tiles have a selected state instead.

Helpful tip

The Active state has the same styles as the Hover state.

 Active light theme link tiles use the focus state styles Active dark theme link tiles use the focus state styles

Selected

Only a selectable tile has a selected state. A link tile has an active state instead.

When selected, the form input of light theme selectable tiles appears blue and filled or checked When selected, the form input of dark theme selectable tiles appears light blue and filled or checked

Disabled

Disabled light theme tiles have a light gray background and lighter gray text. Disabled link tiles have a ban icon Disabled dark theme tiles have a lighter gray background and light gray text. Disabled link tiles have a ban icon
Edit this page on GitHub