kit

Link

Text links in the accent colour with a calm underline, a quiet variant for dense lists, an arrow for links that leave the site, and the visually hidden helper.

Tier 1 · CSS only Native link preview

Example

Running text with a standard link in it, and another one.

A quiet link for lists and navigation.

A link to another site (another site)

Show the markup 
<div class="kit-stack demo-fill" data-gap="3">
  <p class="demo-text">Running text with <a class="kit-link" href="#link">a standard link</a> in it, and <a class="kit-link" href="#link">another one</a>.</p>
  <p class="demo-text"><a class="kit-link" data-variant="quiet" href="#link">A quiet link</a> for lists and navigation.</p>
  <p class="demo-text"><a class="kit-link" href="https://example.com" data-external>A link to another site<span class="kit-vh"> (another site)</span></a></p>
</div>

Usage

<a class="kit-link" href="/pricing">See pricing</a>
<a class="kit-link" data-variant="quiet" href="/team">Team</a>
<a class="kit-link" href="https://example.com" data-external>Example<span class="kit-vh"> (another site)</span></a>
Attribute Values Default
data-variant quiet: text colour, underlined on hover accent, always underlined
data-external adds an arrow for a link to another site none

kit-vh hides text visually but keeps it for screen readers; use it wherever words help out of context ("Edit project one").

Accessibility

  • Links in running text are underlined, not told apart by colour alone (WCAG 1.4.1); the quiet variant is for navigation lists where the context says "link".
  • The external arrow is decoration: say "another site" in hidden text if it matters. Only open new tabs when there's a strong reason, and say so.