An inline link is an underlined text link that flows within body copy, lists and UI text. The underline is its affordance, and it is never paired with icons.
Tokens, sizes, states and requirements. Values come from the live token package and from Figma: Inline link.
Resolved from the live token package.
| Color | Part | Token | Value |
|---|
A link has the same color as the text around it, so the enabled colors are the text colors (Secondary and Tertiary are the same values as text-action-secondary and text-action-tertiary). The hover colors are the three action hover tokens: text-action-primary-hover, text-action-secondary-hover and text-action-tertiary-hover.
| Size | Type token | Desktop (769px+) | Mobile and tablet | Weight |
|---|---|---|---|---|
| XLarge | body-xl | 24/32, 0 | 20/26, 0 | 400 |
| Large | body-lg | 20/28, 0.18px | 18/24, 0.18px | 400 |
| Medium | body-md | 17/24, 0.32px | 16/22, 0.32px | 400 |
| Small | body-sm | 14/20, 0.36px | 14/20, 0.36px | 400 |
sm (640 to 768px) looks like mobile. The weight is a modifier, see Typography. The old inline-link--small-bold is kept: it is Small with the Bold weight.
| Attribute | Value |
|---|---|
| Height | The line height of the text: 32, 28, 24 or 20px (desktop) |
| Padding and margin | None |
| Underline | The browser’s default 1px underline |
| Icon | Never |
An inline link has no padding or margin of its own, so there is no measurement figure. It takes its box from the text around it.
The reverse of the action link: underlined when enabled, the underline is removed on hover and the color changes. Hover is forced on this page; in your code it comes from :hover.
| State | Primary | Secondary | Tertiary | Inverted |
|---|
Enabled is underlined text (Default) or text with no underline (Reverse). Hover is a reduced-contrast text: the color shifts and the underline goes (Default), or the underline appears (Reverse). There is no Disabled state: remove the link or show plain text.
The last two rows are the reverse underline (Figma “Reverse=yes”): no underline when enabled, underline on hover.
| Size | font-feature-settings |
|---|---|
| XLarge, Large | ss02, ss03 |
| Medium, Small | ss02, ss03, ss06 |
| Modifier | Class | CSS |
|---|---|---|
| Regular | (none) | font-weight: 400 |
| Medium | inline-link--weight-medium | font-weight: 500 |
| Bold | inline-link--bold | font-weight: 600 |
| Italic | inline-link--italic | font-style: italic |
Figma weights are 100 higher than the CSS (confirmed by design, see eco-typography). The font package ships 300, 400, 500 and 700, each with an italic face, so 600 renders with the 700 face. A weight or italic only makes a link follow the text around it, never emphasize it.
Breuer Condensed. The type token, size and line height of each size are under Sizes.
| Element | Class | Notes |
|---|---|---|
| Link | inline-link | A real <a href>. display: inline, underlined. |
| Size | inline-link--xlarge, --large, --medium, --small | Follows the text around the link. |
| Color | inline-link--secondary, --tertiary, --inverted | Primary is the default (no class). |
| Weight, style, underline | inline-link--weight-medium, --bold, --italic, --reverse | Modifiers on any size and color. Regular, normal and underlined when enabled are the defaults. |
There is one type. A link with an icon is an Action link.
As wide as its text. It wraps with the text.
| Property | Duration | Easing |
|---|---|---|
color | duration-fast-3 | ease-standard |
text-decoration is not transitioned.
| Input | Result |
|---|---|
| Click, Enter | Follows the link. A link always navigates: an action in the page is a button. |
| Tab | Moves to the link. A 2px ring shows on keyboard focus only (body.keyboard-nav). |
| Underline | On when enabled, removed on hover. Never transitioned. With the reverse underline: off when enabled, on on hover. |
| Hover | Reduced contrast: a color shift and the underline removal. |
| Disabled | None. Remove the link or show plain text. |
| Icons | Never. A link with an icon is an Action link. |
| Markup | display: inline, a real <a href> inside the text. |
| Topic | Requirement |
|---|---|
| Element | A real <a href> only. Links navigate; anything else is a <button>. Never href="#" with a JavaScript handler (the documentation examples use it only to keep the page from jumping). |
| Accessible name | The visible text. When more context is needed, extend it with an aria-label that begins with the visible text (WCAG 2.5.3 Label in Name), for example the visible “Delivery terms” with aria-label="Delivery terms (PDF)". |
| New tab or file | A link that opens a new tab or a file says so in its accessible name (“opens in a new tab”), and has rel="noopener". |
| Target size | Inline links in a text block are exempt from the 24px minimum (WCAG 2.5.8 inline exception). A standalone list of links (a footer list) needs an effective height of at least 24px, from the line height or padding. |
| Name | The link text names the destination and makes sense out of context (WCAG 2.4.4). Never “click here”. |
| Color | The underline separates the link from the text, so color is not the only signal (WCAG 1.4.1). |
| Contrast | Text needs at least 4.5:1 against its background in every state, hover included (WCAG 1.4.3). The link color against the surrounding text needs at least 3:1 or a non-color indicator: the underline is that indicator, another reason to keep it. Use Inverted on dark surfaces. Open point: measured on white, Tertiary hover (#939595) is 3.0:1 and fails; Primary hover, Secondary hover and Tertiary (#737373) are 4.7:1 on white but 4.4:1 on #f6f6f6. Confirm with design. |
| Disabled | Never disable a link: a disabled <a> has no standard semantics. Remove it or render plain text. |
| Style | The size, line height, letter spacing, weight and italic match the surrounding text. A link is never larger or bolder than its text for emphasis. |
| Focus | A 2px ring with border-focus and 2px offset, on keyboard focus (WCAG 2.4.7, 1.4.11). |