Link
Link — a text link that stands on its own, the site’s .arrow-link: the blog’s feature and hub cards, the home reviews’ more, the 404 page.
Beta · Actions · packages/css/src/components/link.css
.pui-link (--arrow --on-dark) · __icon. body/large Regular in text/subtle, the ink on hover; the arrow nudges. The inline link in prose is Typography’s.
Sizes across, states down.
What it is for
Section titled “What it is for”- Arrow false / true — the trailing glyph (Icon, exposed: swap it), nudged on hover
- Ground light / on-dark — text/subtle → text/default, or text/on-inverse throughout
- State default / hover — focus draws the same as hover, with the ring (CSS)
- Size and weight are the body/large role’s, so the tablet and mobile modes carry it
Use when a link that stands alone leads on — to a case study, a hub, all the posts; the last line of a card.
Do not use when the link sits in running text (Typography’s a); it is an action (Button); it is the site’s navigation (Nav link).
Relates to Nav link, Button, Card, Typography, Icon.
Anti-patterns an underline (the arrow and the ink change are the affordance) · an arrow that does not nudge · two arrow links side by side · a link in the accent hue · a size typed instead of the role.
Keywords: link, arrow link, read more, text link, cta link, see all
Figma — page Link: Link (8 variants)
The markup — copy this
Section titled “The markup — copy this”The class, the parts, and nothing that is not in the package. The same block opens link.css.
<a class="pui-link" href="…">Read the case study</a><a class="pui-link pui-link--arrow" href="…">All case studies<span class="pui-icon pui-link__icon"><svg><use href="icons.svg#arrow-right"/></svg></span></a>The modifiers
Section titled “The modifiers”| What it is | Note | |
|---|---|---|
| Arrow | --arrow — the trailing 16 glyph (__icon), nudged on hover | — |
| Ground | (none) light · --on-dark — text/on-inverse on a dark or gradient ground | — |
Accessibility — measured, not assumed
Section titled “Accessibility — measured, not assumed”Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.
Contrast
Section titled “Contrast”No story of this component renders a text pair axe can measure — a component made of surfaces and borders rather than words. The token pairs it uses are in artifacts/contrast-matrix.md.
The focus ring
Section titled “The focus ring”| primitive | on | the indicator | over | the change | |
|---|---|---|---|---|---|
| Link | surface/page | shadow #6a66e4 2 px |
#ffffff |
4.53 | ok |
| Link | surface/card | shadow #6a66e4 2 px |
#f2f2f7 |
4.06 | ok |
| Link | surface/sunken | shadow #6a66e4 2 px |
#f2f2f2 |
4.05 | ok |
| Link - arrow | surface/page | shadow #6a66e4 2 px |
#ffffff |
4.53 | ok |
| Link - arrow | surface/card | shadow #6a66e4 2 px |
#f2f2f7 |
4.06 | ok |
| Link - arrow | surface/sunken | shadow #6a66e4 2 px |
#f2f2f2 |
4.05 | ok |
| Link - on-dark | surface/inverse | shadow #ffffff 2 px |
#231b1b |
16.88 | ok |
3 of 3 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.
Keyboard
Section titled “Keyboard”Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.
Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).
Pepper UI v1.5.0
The Mobupps design system. 386 tokens, 88 components, 65 pages in the workshop — every page of this site generated from the repository, so nothing here is typed twice.