Added in v5.3
View on GitHubLink
Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
On this page
Link opacityLink to this section: 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.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components.
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>You can even change the opacity level on hover.
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>Link underlinesLink to this section: Link underlines
Underline colorLink to this section: Underline color
Change the underline's color independent of the link text color.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components.
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]Underline offsetLink to this section: 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.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components.
<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>Underline opacityLink to this section: Underline opacity
Change the underline's opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components.
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>Hover variantsLink to this section: Hover variants
Just like the .link-opacity-*-hover utilities, .link-offset and .link-underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
Underline opacity 0
</a>Colored linksLink to this section: Colored links
Colored link helpers have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components.
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning bg-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light bg-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark bg-white link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
CSSLink to this section: 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 APILink to this section: Sass utilities API
Link utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),