Colored links

import { getData } from '@libs/data'

Link colors

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state. 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.

<Callout> **Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It’s treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it’s a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities. </Callout>

<Example code={[ ...getData('theme-colors').map((themeColor) => <p><a href="#" class="link-${themeColor.name}">${themeColor.title} link</a></p>), <p><a href="#" class="link-body-emphasis">Emphasis link</a></p> ]} />

<Callout name="warning-color-assistive-technologies" />

Link utilities

<AddedIn version="5.3.0"/>

Colored links can also be modified by our link utilities.

<Example code={[ ...getData('theme-colors').map((themeColor) => <p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} 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> ]} />