Link
Link color, opacity, and underline utilities with interactive state support.
On this page
Link colors
.link-* classes apply context colors to links and include interactive state styles (:hover, :focus, :active, :visited) — unlike .fg-* utilities, which are static. Some link color variants use light foreground values and are intended for use on dark backgrounds only.
<p><a href="#" class="link-default">Default link</a> — <a href="https://example.com" class="link-default">visited link</a></p>
<p><a href="#" class="link-alternate">Alternate link</a> — <a href="https://example.com" class="link-alternate">visited link</a></p>
<p><a href="#" class="link-primary">Primary link</a> — <a href="https://example.com" class="link-primary">visited link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a> — <a href="https://example.com" class="link-secondary">visited link</a></p>
<p><a href="#" class="link-neutral">Neutral link</a> — <a href="https://example.com" class="link-neutral">visited link</a></p>
<p><a href="#" class="link-danger">Danger link</a> — <a href="https://example.com" class="link-danger">visited link</a></p>
<p><a href="#" class="link-success">Success link</a> — <a href="https://example.com" class="link-success">visited link</a></p>
<p><a href="#" class="link-warning">Warning link</a> — <a href="https://example.com" class="link-warning">visited link</a></p>
<p><a href="#" class="link-info">Info link</a> — <a href="https://example.com" class="link-info">visited link</a></p>
<p><a href="#" class="link-black">Black link</a> — <a href="https://example.com" class="link-black">visited link</a></p>
<p><a href="#" class="link-white">White link</a> — <a href="https://example.com" class="link-white">visited link</a></p>Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.
Reset color
.fg-reset removes the foreground color override, causing the element to inherit color from its nearest ancestor.
Secondary body text with a reset link.
Secondary body text with a normal link.
<p class="fg-subtle">
Secondary body text with a <a href="#" class="fg-reset">reset link</a>.
</p>
<p class="fg-subtle">
Secondary body text with a <a href="#">normal link</a>.
</p>Link opacity
Link opacity utilities adjust the alpha channel of link color values. Reduced opacity can impact color contrast — review contrast levels when using these utilities.
<p><a href="#" class="link-opacity-solid">Link opacity solid link</a></p>
<p><a href="#" class="link-opacity-95">Link opacity 95 link</a></p>
<p><a href="#" class="link-opacity-90">Link opacity 90 link</a></p>
<p><a href="#" class="link-opacity-80">Link opacity 80 link</a></p>
<p><a href="#" class="link-opacity-70">Link opacity 70 link</a></p>
<p><a href="#" class="link-opacity-60">Link opacity 60 link</a></p>
<p><a href="#" class="link-opacity-50">Link opacity 50 link</a></p>
<p><a href="#" class="link-opacity-40">Link opacity 40 link</a></p>
<p><a href="#" class="link-opacity-30">Link opacity 30 link</a></p>
<p><a href="#" class="link-opacity-20">Link opacity 20 link</a></p>
<p><a href="#" class="link-opacity-10">Link opacity 10 link</a></p>
<p><a href="#" class="link-opacity-05">Link opacity 05 link</a></p>
<p><a href="#" class="link-opacity-zero">Link opacity zero link</a></p><p><a href="#" class="link-secondary link-opacity-solid">Link opacity solid link</a></p>
<p><a href="#" class="link-secondary link-opacity-95">Link opacity 95 link</a></p>
<p><a href="#" class="link-secondary link-opacity-90">Link opacity 90 link</a></p>
<p><a href="#" class="link-secondary link-opacity-80">Link opacity 80 link</a></p>
<p><a href="#" class="link-secondary link-opacity-70">Link opacity 70 link</a></p>
<p><a href="#" class="link-secondary link-opacity-60">Link opacity 60 link</a></p>
<p><a href="#" class="link-secondary link-opacity-50">Link opacity 50 link</a></p>
<p><a href="#" class="link-secondary link-opacity-40">Link opacity 40 link</a></p>
<p><a href="#" class="link-secondary link-opacity-30">Link opacity 30 link</a></p>
<p><a href="#" class="link-secondary link-opacity-20">Link opacity 20 link</a></p>
<p><a href="#" class="link-secondary link-opacity-10">Link opacity 10 link</a></p>
<p><a href="#" class="link-secondary link-opacity-05">Link opacity 05 link</a></p>
<p><a href="#" class="link-secondary link-opacity-zero">Link opacity zero link</a></p>Hover variants
Hover-specific opacity variants apply the opacity value only on :hover.
<p><a href="#" class="hover:link-opacity-solid">Link hover opacity solid link</a></p>
<p><a href="#" class="hover:link-opacity-95">Link hover opacity 95 link</a></p>
<p><a href="#" class="hover:link-opacity-90">Link hover opacity 90 link</a></p>
<p><a href="#" class="hover:link-opacity-80">Link hover opacity 80 link</a></p>
<p><a href="#" class="hover:link-opacity-70">Link hover opacity 70 link</a></p>
<p><a href="#" class="hover:link-opacity-60">Link hover opacity 60 link</a></p>
<p><a href="#" class="hover:link-opacity-50">Link hover opacity 50 link</a></p>
<p><a href="#" class="hover:link-opacity-40">Link hover opacity 40 link</a></p>
<p><a href="#" class="hover:link-opacity-30">Link hover opacity 30 link</a></p>
<p><a href="#" class="hover:link-opacity-20">Link hover opacity 20 link</a></p>
<p><a href="#" class="hover:link-opacity-10">Link hover opacity 10 link</a></p>
<p><a href="#" class="hover:link-opacity-05">Link hover opacity 05 link</a></p>
<p><a href="#" class="hover:link-opacity-zero">Link hover opacity zero link</a></p>Link underlines
Underline utilities modify the visual presentation of link underlines independently from link text color.
Underline color
The underline color can be set independently from the link text color.
<p><a href="#" class="text-decoration-default">Default underline</a></p>
<p><a href="#" class="text-decoration-alternate">Alternate underline</a></p>
<p><a href="#" class="text-decoration-primary">Primary underline</a></p>
<p><a href="#" class="text-decoration-secondary">Secondary underline</a></p>
<p><a href="#" class="text-decoration-neutral">Neutral underline</a></p>
<p><a href="#" class="text-decoration-danger">Danger underline</a></p>
<p><a href="#" class="text-decoration-success">Success underline</a></p>
<p><a href="#" class="text-decoration-warning">Warning underline</a></p>
<p><a href="#" class="text-decoration-info">Info underline</a></p>
<p><a href="#" class="text-decoration-black">Black underline</a></p>
<p><a href="#" class="text-decoration-white">White underline</a></p>Underline offset
Underline offset utilities set text-underline-offset in em units, scaling automatically with the element’s font size.
<p><a href="#">Default link</a></p>
<p><a class="underline-offset-1" href="#">Offset 1 link</a></p>
<p><a class="underline-offset-2" href="#">Offset 2 link</a></p>
<p><a class="underline-offset-3" href="#">Offset 3 link</a></p>Underline opacity
.text-decoration-opacity-{value} adjusts the alpha channel of the decoration color. Apply it alongside .text-decoration or any .text-decoration-{color} class, which set the decoration color as an opacity-aware value.
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-solid">Underline opacity solid</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-95">Underline opacity 95</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-90">Underline opacity 90</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-80">Underline opacity 80</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-70">Underline opacity 70</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-60">Underline opacity 60</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-50">Underline opacity 50</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-40">Underline opacity 40</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-30">Underline opacity 30</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-20">Underline opacity 20</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-10">Underline opacity 10</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-05">Underline opacity 05</a></p>
<p><a href="#" class="underline-offset-2 text-decoration-info text-decoration-opacity-zero">Underline opacity zero</a></p>Hover variants
Hover-specific decoration opacity variants apply the opacity value only on :hover.
<a class="text-decoration text-decoration-opacity-zero hover:text-decoration-opacity-50 underline-offset-3" href="#">
Underline opacity 0
</a>Icon links
See the Icon Link documentation for more information on how to use icons with links.
Streched links
See the Stretched Link documentation for more information on how to use stretched links.
CSS
Reference
| Class | Properties |
|---|---|
.link-default | --cx-link-main-color: var(--cx-default-link-main); |
.link-alternate | --cx-link-main-color: var(--cx-alternate-link-main); |
.link-primary | --cx-link-main-color: var(--cx-primary-link-main); |
.link-secondary | --cx-link-main-color: var(--cx-secondary-link-main); |
.link-neutral | --cx-link-main-color: var(--cx-neutral-link-main); |
.link-warning | --cx-link-main-color: var(--cx-warning-link-main); |
.link-success | --cx-link-main-color: var(--cx-success-link-main); |
.link-danger | --cx-link-main-color: var(--cx-danger-link-main); |
.link-info | --cx-link-main-color: var(--cx-info-link-main); |
.link-black | --cx-link-main-color: var(--cx-black-link-main); |
.link-white | --cx-link-main-color: var(--cx-white-link-main); |
.link-opacity-solid | --cx-link-opacity: var(--cx-opacity-solid); |
.link-opacity-95 | --cx-link-opacity: var(--cx-opacity-95); |
.link-opacity-90 | --cx-link-opacity: var(--cx-opacity-90); |
.link-opacity-80 | --cx-link-opacity: var(--cx-opacity-80); |
.link-opacity-70 | --cx-link-opacity: var(--cx-opacity-70); |
.link-opacity-60 | --cx-link-opacity: var(--cx-opacity-60); |
.link-opacity-50 | --cx-link-opacity: var(--cx-opacity-50); |
.link-opacity-40 | --cx-link-opacity: var(--cx-opacity-40); |
.link-opacity-30 | --cx-link-opacity: var(--cx-opacity-30); |
.link-opacity-20 | --cx-link-opacity: var(--cx-opacity-20); |
.link-opacity-10 | --cx-link-opacity: var(--cx-opacity-10); |
.link-opacity-05 | --cx-link-opacity: var(--cx-opacity-05); |
.link-opacity-zero | --cx-link-opacity: var(--cx-opacity-zero); |
.link-opacity-subtle | --cx-link-opacity: var(--cx-opacity-link-subtle); |
.link-opacity-slight | --cx-link-opacity: var(--cx-opacity-link-slight); |
In addition to the following Sass functionality, see the included CSS custom properties (aka CSS variables) for colors and more.
Sass utilities API
Link utilities are declared in the utilities API in scss/utilities/_link.scss. Learn how to use the utilities API.
"link-color": (
property: (
"--link-main-color": null,
"--link-hover-color": null,
"--link-active-color": null,
"--link-visited-color": null
),
class: link,
values: $-link-colors
),
"link-opacity": (
property: --link-opacity,
class: link-opacity,
state: hover,
values: map-merge-multiple(
map-loop($opacities, varify, "$key", "opacity"),
map-loop($link-opacities, varify, "$key", "opacity-link")
)
),