Colored links

Colored links with hover states

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.

See Bootstrap examples that are incompatible with Orange Design System.

Incompatibility with Orange Design System. More information

The colors combinations below do not belong to the Orange Design System specifications.

Please refer to our links section and to the Text links in body copy guidelines on the Orange Design System website.

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.

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning bg-dark">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light bg-dark">Light link</a></p>
<p><a href="#" class="link-dark bg-white">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

html

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.

Link utilities

Added in v5.3.0

Colored links can also be modified by our link utilities.