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.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Figma: Tile link.
Resolved from the live token package.
| Background · state | Part | Token | Value |
|---|
The border is a separate layer (inset: 0), so it never changes the tile size.
| Size · placement | Desktop padding | Desktop gap | Mobile padding | Mobile gap | Icon |
|---|---|---|---|---|---|
| Large · vertical | 10px 16px | 4px | 9px 16px | 4px | 24px |
| Large · horizontal | 8px 16px | 8px | 9px 16px | 4px | 20px |
| Small · vertical | 8px 16px | 4px | 6px 8px | 4px | 24px |
| Small · horizontal | 6px 16px | 8px | 6px 8px | 4px | 20px |
Label only uses the horizontal padding, without an icon. sm (640 to 768px) looks like mobile.
| Breakpoint | Height | Horizontal padding | Logo height |
|---|---|---|---|
| Desktop (769px+) | 112px | 48px | 48px |
| Mobile and tablet | 80px | 32px | 24px |
Padding of the tile at each size and placement. The shaded areas are the padding; the border is drawn in its own layer and does not change the size. The numbers are read from the component. A brand tile has a fixed height and only horizontal padding, so it is listed in the table.
| Attribute | Value |
|---|---|
| Padding | See the figure and Sizes: per size, placement and breakpoint |
| Gap, icon to label | 4px, or 8px for Horizontal on desktop |
| Border | 1px, in its own layer (inset: 0) |
| Brand tile height | 112px desktop, 80px mobile |
| Corners | Square |
| Focus ring | 2px, 2px outside the tile |
The gap as a spacing token. The tile paddings (10, 9, 8 and 6px) have no spacing token.
| Part | Value |
|---|---|
| Gap, 4px | space-4 |
| Gap, 8px | space-8 |
| Padding, 16px | space-16 |
| Focus ring offset | 2px |
Hover is forced on this page; in your code it comes from :hover.
border-hover, 1px). The logo is unchanged.surface-action-1 with surface-opacity-white-20 on top. The logo is unchanged.border-hover, 1px), and the label and the icon shift to the action hover color.| State | White | Grey | Black |
|---|
| Size | Type token | Desktop | Mobile |
|---|---|---|---|
| Large | body-md | 17/24, 0.32px | 16/22, 0.32px |
| Small | body-sm | 14/20, 0.36px | 14/20, 0.36px |
Breuer Condensed with ss02, ss03 and ss06.
| Modifier | Class | CSS |
|---|---|---|
| Regular | (none) | font-weight: 400 |
| Medium | tile-link--weight-medium | font-weight: 500 |
| Bold | tile-link--bold | font-weight: 600 |
| Italic | tile-link--italic | font-style: italic |
The modifiers change the label only. The font package ships 300, 400, 500 and 700, each with an italic face, so 600 renders with the 700 face.
| Element | Class | Notes |
|---|---|---|
| Link | tile-link | A real <a href>, display: inline-flex. |
| Inner | tile-link__inner | The tile. Holds the background, the padding and the border layer. |
| Icon | tile-link__icon | A Material Symbol, aria-hidden. |
| Label | tile-link__label | One line. |
| Logo | img in the inner element | Brand tiles only, with an alt. |
| Modifiers | tile-link--large, --small, --vertical, --horizontal, --brand, --white, --grey, --black | |
| Label weight, style | tile-link--weight-medium, --bold, --italic | Change the label only. |
| Type | Class | Use |
|---|---|---|
| Label + icon | tile-link--large tile-link--vertical (or horizontal, small) | An icon over or beside a label. |
| Label only | tile-link--horizontal | The label alone. |
| Brand | tile-link--brand tile-link--large | A logo. Large only. |
The tile is as wide as its content plus the padding.
| Property | Duration | Easing |
|---|---|---|
border-color | duration-fast-3 | ease-standard |
| Input | Result |
|---|---|
| Click anywhere on the tile | Follows the link. |
| Enter, Tab | Follows the link; 2px focus ring on keyboard focus. |
| Hover | The border darkens. A Label + icon or Label only tile also changes the color of the label and the icon; a brand logo is unchanged. The Black tile gets a 20% white overlay. |
| Markup | The whole tile is one <a href>. Brand tiles need an alt with the brand name. |
| Topic | Requirement |
|---|---|
| Element | One <a href> for the whole tile. Links navigate; buttons act. |
| Name | The label is the link text. On a brand tile the alt of the logo is the link text (WCAG 1.1.1, 2.4.4). |
| Focus | A 2px ring with border-focus and 2px offset, on keyboard focus (WCAG 2.4.7, 1.4.11). |
| Contrast | The border and text meet the contrast requirements on White, Grey and Black. Use the white logo version on the Black tile. |