Tile

Usage

A tile can be used when a clickable container is needed to provide one call to action or show one form input option. It can be grouped with similarly-structured and styled tiles in a tile group. There are two types, link tiles and selectable tiles. Both can be used in groups or individually, except for a selectable tile with a radio button, which always has to be grouped.

Tile vs. card

The primary distinguishing factor between a tile and a card is that each tile can perform only one action because the whole surface is clickable. A tile also has the ability to be used as selectable items in a form. Tiles can be grouped together like card, however.

Variants

Link tiles

A link tile has many different use cases, but it is especially helpful to use in place of a card group that would have repetitive calls to action. They can also be used in place of Brick calls to action if adding icons or images is necessary.

Compact link tile

A link tile has a compact variant that can be used in sections that need a denser concentration of information. To further condense each tile, a compact link tile does not have a title slot and the icon appears to the left of content, rather than above it.

Desaturated heading

The desaturated heading variant is best used for pages with many link tiles. For example, it can help prevent a blue heading from appearing visually overwhelming on a search results page, especially if each tile includes a logo. Other than the heading color, the hover, focus, and active states look the same as a default link tile and the arrow will always be blue.

Image sizes

For a link tile, there are two image sizes available. The Default size has spacing around the entire image. The Full-width image size bleeds to the top, left, and right edges. The default image size is recommended for logos, while illustrations or photos would work well as a full-width image.

Selectable tiles

Warning

A selectable tile with a radio button must be used in a group. If there is only one choice listed, use a checkbox.

A selectable tile is a form element and can be used as either a radio button or a checkbox. The radio button should be used if only one option can be selected. A selectable tile with checkboxes should be used when a user can select more than one option.

Writing content

The four content slots within a tile are title, heading, body, and footer.

• Title

  A title provides secondary descriptive context. A selectable tile does not have title slots.

• Heading

  In a link tile, the heading should indicate what clicking on the tile will do. In a selectable tile, the heading labels the radio button or checkbox.

• Body

  The body text expands on heading content and gives the user more information.

• Footer

  Footer text should be brief and be used for supplementary information only.

Character count

The recommended character counts below include spaces. Line counts are based on a default link tile at minimum width.

Element	Character count	Line count
Title text	20	1
Heading text	64	3
Body text	160	7
Footer text	25	1

Layouts

Like a card, the default tile should have a minimum width of four grid columns, so there is a maximum of three default link tiles in one row.

The compact link tiles or selectable tiles can condense to a minimum width of three grid columns or a max of four compact tiles in a row.

Behavior

Vertical height

The vertical height of a tile will increase as more content is added. The vertical height of multiple tiles in one row matches the height of the tallest tile.

Best practices

Link tile actions

Do not use a link tile if it needs to link to more than one destination.

A link tile should not be used as a button. A link tile is akin to a call to action and should navigate a user somewhere else.

Tile groups

Do not use different variants of a tile in one tile group.

When grouped, use the same number of content slots to make them easy to scan.

If tiles have images, the images should have the same height. This will help the headings of each tile align vertically which also helps users scan more easily.

Footer content

The footer of a link tile or selectable tile should not include calls to action, links, or buttons, but it can include non-interactive elements, like tags or badges. Ideally, footer content should be able to fit on one line, but it can wrap to two when necessary.