naUILinks
Styled anchor classes with colour variants, decoration modifiers, and states.
Base link
Add na-link to any <a> to apply the default link style: primary colour, no underline at rest, underline on hover.
Here is a standard link in a sentence.
<a href="#" class="na-link">standard link</a>Color variants
Combine na-link with a colour modifier to change the link colour.
<a href="#" class="na-link na-link-primary">primary</a>
<a href="#" class="na-link na-link-secondary">secondary</a>
<a href="#" class="na-link na-link-success">success</a>
<a href="#" class="na-link na-link-warning">warning</a>
<a href="#" class="na-link na-link-danger">danger</a>
<a href="#" class="na-link na-link-info">info</a>
<a href="#" class="na-link na-link-muted">muted</a>
<a href="#" class="na-link na-link-dark">dark</a>
<a href="#" class="na-link na-link-white">white</a>Decoration modifiers
Always underlined
<a href="#" class="na-link na-link-underline">always underlined</a>Never underlined
<a href="#" class="na-link na-link-no-underline">never underlined</a>Quiet link
Inherits the surrounding text colour. The underline is invisible at rest, appearing on hover. Useful for card titles or nav items.
Read our terms and conditions before continuing.
<p>Read our <a href="#" class="na-link na-link-quiet">terms and conditions</a> before continuing.</p>External link
Appends an ? superscript to signal the link opens off-site.
<a href="https://example.com" class="na-link na-link-external" target="_blank" rel="noopener">
External site
</a>Disabled link
<a href="#" class="na-link na-link-disabled">disabled</a>
<a href="#" class="na-link" aria-disabled="true">disabled via aria</a>Class reference
| Class | Description |
|---|---|
na-link | Base link - primary colour, underline on hover |
na-link-primary | Primary colour override |
na-link-secondary | Secondary colour override |
na-link-success | Success colour override |
na-link-warning | Warning colour override |
na-link-danger | Danger colour override |
na-link-info | Info colour override |
na-link-muted | Muted grey colour |
na-link-dark | Dark text colour |
na-link-white | White - for dark backgrounds |
na-link-underline | Always shows underline |
na-link-no-underline | Never shows underline |
na-link-quiet | Inherits colour, ghost underline on hover |
na-link-external | Appends ? superscript indicator |
na-link-disabled | Greyed out, pointer-events none |