Link

Opt-in styling for anchors. Add .re-link to any <a> and pick a variant with data-variant.

Default

Read the foundation page for token details.

Live example

<p>
  Read the
  <a href="./foundation.html" class="re-link" id="link-default">foundation page</a>
  for token details.
</p>

Muted

Quiet inline link: view button.

Live example

<p>
  Quiet inline link:
  <a href="./button.html" class="re-link" data-variant="muted" id="link-muted">view button</a
  >.
</p>

Subtle

Underline appears on hover only: back to index.

Live example

<p>
  Underline appears on hover only:
  <a href="./index.html" class="re-link" data-variant="subtle" id="link-subtle"
    >back to index</a
  >.
</p>

External

Visit MDN HTML reference for native element semantics.

Live example

<p>
  Visit
  <a
    href="https://developer.mozilla.org/en-US/docs/Web/HTML"
    class="re-link"
    data-variant="external"
    target="_blank"
    rel="noopener noreferrer"
    id="link-external"
    >MDN HTML reference</a
  >
  for native element semantics.
</p>

Accessibility

• Keyboard — Native anchor behavior: Tab moves focus to the link, Enter follows the href. .re-link is styling only and adds no extra keys or behaviors.
• Focus — A visible :focus-visible ring (--re-shadow-focus, with outline: none) marks the focused link, so it stays distinguishable inline within body text.
• Semantics — A plain <a href>; assistive tech announces it as a link and reads its visible text as the accessible name. The external variant should open in a new context with target="_blank" plus rel="noopener noreferrer", as shown above.
• Notes — The external variant’s ↗ glyph is a decorative CSS ::after hint; it is not part of the accessible name (give the link descriptive text and, if needed, your own aria-label). See the accessibility guide.