f40e76d1f7
* Update snippet examples for dark mode * Fix markup * Review comments * undo colored links docs from this PR
4.3 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 10 {{< /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 >}}
Sass
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.
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" >}}