Skip to main content

Link styles

The link styles provide helper classes to set links to be subtle (i.e. no underline and they match the text around them).

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/link/link.css';

See Import Cacao CSS for more information.

Example usage​

Here is an example of using this on a link:

<a href="/some/url" class="link-subtle">Subtle link</a>

Source CSS​

link/link.css
/* =========================================================================== *\
    Link utilities
\* =========================================================================== */

.link-subtle {
    color: inherit !important;
    text-decoration: none !important;
}

.link-subtle:focus-visible {
    text-decoration: underline !important;
}

@media (hover: hover) and (pointer: fine) {
    .link-subtle:hover {
        text-decoration: underline !important;
    }
}