Design System

Design System

Link

Actions

Overview

They are always underlined, because colour alone never marks a link.

Live example

Usage

  • brut (default): 700 weight, a 3px foreground underline at a 4px offset.
  • nav: a 3px accent underline. The current page sets current and becomes a filled secondary pill with no underline, and gets aria-current="page".
  • muted: footer-size text in muted-foreground with a 2px accent underline that appears on hover and focus. Hover darkens the text to foreground.
  • Link text should make sense out of context: "Read more about Everything Is A List", not "click here".
  • An icon after the text is decorative, which means it should go to an aria-hidden="true".
  • Focus is the focus-halo; the link also lifts to z-raised so the ring is not clipped.

Accessibility

This section is still in progress.

Related

References

This section is still in progress.

On this page