Link
.link — a text link outside .prose.
Examples
Read the token reference, or the changelog.
<p>Read the <a class="link" href="#tokens">token reference</a>, or
<a class="link link-quiet" href="#changelog">the changelog</a>.</p>The reset strips the UA underline from any anchor carrying a class, so a link that needs to look like a link needs this one. .link-quiet underlines only on hover — for a dense list where every row is a link.
Tokens 0
Level 2, declared on .link itself. Set any of them on that selector to restyle this utility without touching the skin.
None. It reads the skin's tokens directly.
Variants and states
Variants
.link-quiet
Inside it
.link-bare
State it reads
Read from the platform, never mirrored into a class that could disagree with it.
:focus:hover
Before you ship it
What you have to do 2 requirements
- Never put
.link-quieton a link inside running text. Without the underline the only thing separating it from the sentence around it is colour, which WCAG 1.4.1 does not accept and a reader with low colour vision does not see. It is for links that are already obviously links by position — a nav item, a whole card. .linkis not what makes a link accessible. A bare<a href>already is one; this only supplies the library's styling. Adding the class to a<span>with a click handler produces something that looks like a link and is reachable by nobody using a keyboard.
src/css/utilities/link.css · npx mostlycss add link