Links
Default links are always displayed in blue, regardless of whether the user has already visited the linked resource. Links generally have no underline, except if used within a paragraph element.
Underlined Links
Links are underlined by default when used within paragraph elements. If you need to underline a link outside of a paragraph,
you can do so with the font-underline class.
Note that as per the CI design, links should only be underlined within flowing text. Make sure not to underline stand-alone links unless it solves a specific usability issue.
<p>
<a href="#">Regular link in a paragraph element</a>
</p>
<a href="#">Regular stand-alone link</a><br />
<a href="#" class="link-underline">Artificially underlined stand-alone link</a>
Links With Visited State
To make an individual link show a visited state, apply the link-visited class to it.
You can also give a visited state to multiple links by applying the class to a common ancestor element.
Note: When using the nested version, it is always a good idea to apply the link-visited class as
precisely as possible to avoid unintended side effects with non-standard links.
Buttons (anything with button in the class name) and disabled links (disabled) are
specifically excluded from this behavior. Any other special links may end up looking buggy.
<a href="links.html">
Standard link
</a><br />
<a href="links.html" class="link-visited">
Link with visited state
</a>
<section class="link-visited margin-bottom">
<h1 class="font-l">
<a href="links.html">These</a>
</h1>
<nav>
<ul>
<li><a href="links.html">Links</a></li>
<li><a href="links.html">All</a></li>
</ul>
</nav>
<a href="links.html">have a</a>
<a href="links.html">
<h2 class="font-m">Visited</h2>
</a>
<p>
<a href="links.html">state</a>.
</p>
</section>
<a href="links.html">This one does not</a>.