Link
Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
Link colors
You can use the .link-* classes to colorize links. Unlike the .fg-* classes, these classes have :hover, :focus, :active and :visited states. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
<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>
<p><a href="#" class="link-body">Body link</a> — <a href="https://example.com" class="link-body">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
Reset a text or link's color with .fg-reset, so that it inherits the color from its parent.
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
Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.
<p><a href="#" class="link-opacity-100">Link opacity 100 link</a>
<p><a href="#" class="link-opacity-75">Link opacity 75 link</a>
<p><a href="#" class="link-opacity-50">Link opacity 50 link</a>
<p><a href="#" class="link-opacity-25">Link opacity 25 link</a>
<p><a href="#" class="link-opacity-10">Link opacity 10 link</a>
<p><a href="#" class="link-opacity-0">Link opacity 0 link</a><p><a href="#" class="link-secondary link-opacity-100">Link opacity 100 link</a>
<p><a href="#" class="link-secondary link-opacity-75">Link opacity 75 link</a>
<p><a href="#" class="link-secondary link-opacity-50">Link opacity 50 link</a>
<p><a href="#" class="link-secondary link-opacity-25">Link opacity 25 link</a>
<p><a href="#" class="link-secondary link-opacity-10">Link opacity 10 link</a>
<p><a href="#" class="link-secondary link-opacity-0">Link opacity 0 link</a>Hover opacity
You can even change the opacity level on hover.
<p><a href="#" class="link-opacity-100-hover">Link hover opacity 100 link</a>
<p><a href="#" class="link-opacity-75-hover">Link hover opacity 75 link</a>
<p><a href="#" class="link-opacity-50-hover">Link hover opacity 50 link</a>
<p><a href="#" class="link-opacity-25-hover">Link hover opacity 25 link</a>
<p><a href="#" class="link-opacity-10-hover">Link hover opacity 10 link</a>
<p><a href="#" class="link-opacity-0-hover">Link hover opacity 0 link</a>Link underlines
Links underlines also be modified by their color and offset.
Underline color
Change the underline’s color independent of the link text color.
<p><a href="#" class="link-underline-default">Default underline</a></p>
<p><a href="#" class="link-underline-alternate">Alternate underline</a></p>
<p><a href="#" class="link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-neutral">Neutral underline</a></p>
<p><a href="#" class="link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-underline-success">Success underline</a></p>
<p><a href="#" class="link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-underline-info">Info underline</a></p>
<p><a href="#" class="link-underline-black">Black underline</a></p>
<p><a href="#" class="link-underline-white">White underline</a></p>Underline offset
Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current 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
Change the underline’s opacity. Requires adding .text-underline to first set an rgba() color we use to then modify the alpha opacity.
<p><a href="#" class="link-secondary link-underline underline-offset-2 underline-info underline-opacity-100">Underline opacity 100</a>
<p><a href="#" class="link-secondary link-underline underline-offset-2 underline-info underline-opacity-75">Underline opacity 75</a>
<p><a href="#" class="link-secondary link-underline underline-offset-2 underline-info underline-opacity-50">Underline opacity 50</a>
<p><a href="#" class="link-secondary link-underline underline-offset-2 underline-info underline-opacity-25">Underline opacity 25</a>
<p><a href="#" class="link-secondary link-underline underline-offset-2 underline-info underline-opacity-10">Underline opacity 10</a>
<p><a href="#" class="link-secondary link-underline underline-offset-2 underline-info underline-opacity-0">Underline opacity 0</a>Hover variants
Just like the .link-opacity-*-hover utilities, .underline-offset and .underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.
<a class="link-underline underline-opacity-0 underline-opacity-50-hover 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
In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.
Sass utilities API
Link utilities are declared in our utilities API in scss/utilities/_index.scss. Learn how to use the utilities API.
"link-opacity": (
css-var: true,
css-variable-name: link-opacity,
class: link-opacity,
state: hover,
values: $link-opacities
),
"underline-offset": (
property: text-underline-offset,
class: underline-offset,
values: (
0: 0,
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
values: map-merge(
map-loop($context-colors, opacity-var, "$key", "underline"),
(
null: #{to-opacity(var(--#{$prefix}link-main-color), var(--#{$prefix}underline-opacity, 1))},
)
)
),
"underline-opacity": (
css-var: true,
css-variable-name: underline-opacity,
class: underline-opacity,
state: hover,
values: $underline-opacities
),