Links Since v1.1.0+

Links can be styled using the .hyperlink class. This is just a semantic way of removing the anti-aliasing from normal links in dark mode. Moreover, underlined links can also be created using the .hyperlink-underline class.

<!-- Normal link (anti-aliasing removed in dark mode) -->
<a href="#" class="hyperlink">Normal link</a>

<!-- Underlined link (anti-aliasing removed in dark mode) -->
<a href="#" class="hyperlink-underline">Underlined link</a>

Please note that without the above classes, links will still be styled properly. The only issue is the anti-aliasing that is applied in dark mode. This can slightly reduce the readability of links, so it is highly recommended that the above classes are used. You can learn more about anti-aliasing in the text utilities section (opens in new tab) of the docs.

Also note, the above classes are not required on links styled as buttons, sidebar links, navbar links, dropdown links, and so on. In general, they should only be used on links which would otherwise have no classes (unless those classes are text color utilities).

Text color utilities #

The .hyperlink and .hyperlink-underline classes can also be used on links styled using text color utilities (opens in new tab). And again, all this really does is remove the anti-aliasing in dark mode and apply the text decoration (for .hyperlink-underline).

<!-- Danger link with .hyperlink (anti-aliasing removed in dark mode) -->
<a href="#" class="hyperlink text-danger">Danger link</a>

<!-- Danger link with .hyperlink-underline (underlined, and anti-aliasing removed in dark mode) --> 
<a href="#" class="hyperlink-underline text-danger">Underlined danger link</a>

Up next: Tables