Link
Usage
Use a link to go somewhere: another page, a section, a document. If it changes data or opens a dialog, it's a button. Never put href="#" on something that runs JavaScript.
- Inline links sit in sentences and are always underlined — color alone isn't enough (WCAG 1.4.1).
- Standalone links (end of a card, below a table) drop the underline until hover but keep weight and an arrow.
- External links open in the same tab by default. Use a new tab only when leaving would lose work (a half-filled inspection form), and say so.
- Link text makes sense out of context: "View service history for KX-219", not "here" or "more".
Anatomy
- Anchor —
<a class="link" href> - Label — the visible text, which is the accessible name
- Icon (optional) —
svg.link__icon: arrow for standalone, external-link for new tabs - Hidden hint (external) —
<span class="sr-only"> (opens in new tab)</span>
Examples
States marked hover, focus-visible and active are frozen with .is-hover, .is-focus-visible, .is-active. Those classes share their rule with the real pseudo-class, so what you see is exactly what users get. Never use them in product code. .is-visited freezes the visited color.
Link
Brake pads were replaced under work order WO-4182. The next inspection is due on 14 November.
Check the FMCSA inspection rules (opens in new tab) before signing off.
You already opened work order WO-4177.
Use visited styling in long lists people work through (work-order queues, manuals).
Assigned to Rosa Méndez at North Yard.
Inherits text color in dense tables; the underline stays.
<p>Brake pads were replaced under <a class="link" href="/work-orders/WO-4182">work order WO-4182</a>.</p>
<a class="link link--standalone" href="/vehicles/KX-219/history">
View service history for KX-219
<svg class="link__icon icon--mirror-rtl" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg>
</a>
<a class="link link--external" href="https://www.fmcsa.dot.gov/regulations" target="_blank" rel="noopener">
FMCSA inspection rules<svg class="link__icon" aria-hidden="true" focusable="false"><use href="#icon-external-link"></use></svg><span class="sr-only"> (opens in new tab)</span>
</a>API
| Hook | Values | Purpose |
|---|---|---|
.link | block class | Inline, underlined link |
.link--standalone | modifier | Semibold, no underline until hover, optional arrow |
.link--external | modifier | With external icon + hidden "(opens in new tab)" |
.link--subtle | modifier | Inherits text color (tables) |
.link__icon | part | Trailing icon |
.is-hover | .is-focus-visible | .is-active | .is-visited | docs-only class | Freeze a state |
Do and don't
Read the brake inspection checklist.
For the checklist, go here.
Accessibility
| Key | Behavior |
|---|---|
| Tab | Moves focus to the link |
| Enter | Follows the link (Space scrolls the page — that's why actions are buttons) |
- Role: native
<a href>. Withouthrefit isn't focusable or a link —ds checkflags it. - Contrast:
--color-text-linkand--color-text-link-visitedare 4.5:1 on canvas in every theme; the underline is the non-color cue. - External: the hidden "(opens in new tab)" is part of the name;
rel="noopener"is required. - Forced colors: uses
LinkText/VisitedText.
Tokens
| Custom property | Purpose |
|---|---|
--color-text-link | Link color |
--color-text-link-visited | Visited color |
--border-width-thin | -thick | Underline thickness, rest / hover |
--color-selected-bg | Active (pressed) highlight |
--icon-size-sm | Icon |
--focus-ring-* | Focus ring |