Co-authored-by: Mark Otto <markd.otto@gmail.com>
4.4 KiB
layout | title | description | group | toc | added |
---|---|---|---|---|---|
docs | Link | Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. | utilities | true | 5.3 |
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]({{< docsref "getting-started/accessibility#color-contrast" >}}).
{{< example >}}
{{< /example >}}You can even change the opacity level on hover.
{{< example >}}
{{< /example >}}Link underlines
Underline color
Change the underline's color independent of the link text color.
{{< example >}} {{< link-underline-colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}
{{- end -}} {{< /link-underline-colors.inline >}} {{< /example >}}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
.
{{< example >}}
{{< /example >}}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.
{{< example >}}
{{< /example >}}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.
{{< example >}} Underline opacity 0 {{< /example >}}
Colored links
[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
{{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }}
{{- end -}} {{< /colored-links.inline >}} {{< /example >}}{{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}}
CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
Sass utilities API
Link utilities are declared in our utilities API in scss/_utilities.scss
. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}}