A tile link is a clickable, graphical link with an SVG graphic or an icon with a label. It highlights navigation destinations in grids and horizontal scrollers.
Every example on this page is the real component, not a picture. Figma: Tile link.
Choose content, size, placement and background. Brand tiles are Large only and ignore placement and label. Hover is forced here; the tile is live.
A tile link is a compact, tappable surface that takes the user to a destination: a brand page, a product category or a pre-filled search. It behaves as both a card and a button. Use it when links need a more graphic and more prominent presentation than a regular button gives, to highlight navigation destinations in grids and horizontal scrollers.
It packages a single link target (an SVG or logo, an icon with a label, or a label alone) into one consistent tile shape, so groups of destinations can be laid out in scannable grids or carousels. One line: a clickable tile with a logo, an SVG, or an icon and a short label that links to a brand, a category or a search result page.
Tile link has three kinds (Brand, Label + icon and Label only), two sizes (Large and Small), two placements (Vertical and Horizontal) and three backgrounds (White, Grey and Black; Black on the brand tile). The label has a weight (Regular, Medium or Bold) and an italic style. It is one of three link types: see the Links guide for how to choose.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a tile link. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to add one to a page.
Use a tile link to highlight navigation destinations in a grid or a horizontal scroller, when a text link or a button is not visual enough. Use it for:
A tile is a quiet card, not a button. The main call to action is a eco-button.
Tiles in a group have the same size and background, so they read as one set.
A link in a sentence is an Inline link, and a standalone link with an arrow is an Action link.
| The link… | Use |
|---|---|
| is a card or logo presented graphically | Tile link |
| stands alone with an arrow | Action link |
| is inside a sentence | Inline link |
| is the main call to action | eco-button |
alt with the brand name.body-md (Large) or body-sm (Small), one line, centered.A brand tile has a logo instead of an icon and a label. It is Large only.
Three kinds of tile in three backgrounds. Use the Breakpoint toggle to preview Desktop (769px and up) and Mobile (below 769px). Sizes are under Sizes below.
Vertical stacks the icon over the label; Horizontal puts them side by side.
The label alone, with the horizontal padding.
A logo in a tile, Large only. 112px high on desktop, 80px on mobile.
The label is Regular by default. tile-link--weight-medium (500), tile-link--bold (600) and tile-link--italic change the label only, not the icon. Use one weight and one style in a group.
White is the default. Grey and Black give a group more weight. Use the white logo version on the Black tile.
Large and Small for Label + icon and Label only; Brand is Large only. The padding changes at 769px. The values are under Sizes in Specifications.
The content is centered in the tile, vertically and horizontally.
Vertical puts the icon above the label, Horizontal puts it beside it. A label-only tile is Horizontal. Put tiles of one group in a row or a grid with the same gap.
As wide as the content plus the padding. Labels do not wrap (white-space: nowrap).
A 1px border in border-primary on White and Grey, border-action-1 on Black. Token names and values are under Design Tokens in Specifications.
The border appears or darkens to border-hover (1px). On a Label + icon or Label only tile the label and the icon change to the action hover color. On a brand tile the logo is unchanged. The Black tile keeps its content and gets a 20% white overlay on surface-action-1.
A 2px ring shows on keyboard focus only (body.keyboard-nav).
A click anywhere on the tile, or Enter, follows the link. All states are listed under States in Specifications.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves between tiles. Enter follows the focused tile. The focus ring shows on keyboard focus.
The whole tile is one <a href>. The icon is aria-hidden. A brand tile needs an alt on the logo with the brand name, because that is the link text.