Links

The .u-link utility provides a simple, no-underline link style that defaults to white. Use modifier classes to apply semantic colors where needed.

Examples

Default (white) link

Primary link

Secondary link

Muted link

Success link

Warning link

Danger link

Accessibility helper

Apply .u-link--focus-underline when you want a visible underline on keyboard focus (useful when contrast is low):

Focus underline example

<a class="u-link" href="#">Default (white) link</a>
<a class="u-link u-link--primary" href="#">Primary link</a>
<a class="u-link u-link--focus-underline" href="#">Focus underline</a>