Link

Inline and standalone links, always underlined so they do not rely on colour.

CSS only components/link.css

In running text

The client can download the PDF or read the terms.

<p class="dsgn-body">The client can <a class="dsgn-link" href="#link">download the PDF</a> or read the <a class="dsgn-link" data-intent="neutral" href="#link">terms</a>.</p>

Usage

Always underlined, so it never relies on colour alone (WCAG 1.4.1). Inherits size and line-height from the surrounding text.

Details

Classes: .dsgn-link .dsgn-icon
Tokens used: --dsgn-accent-text --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-radius-s --dsgn-text
In Figma: Link
Import alone: dsgn.systems/components/link.css