# 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.

1. Underlined Links
2. Links With Visited State

## 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.

Links with and without underlines

    <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>

Regular link in a paragraph element

Regular stand-alone link
Artificially underlined stand-alone link

## 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.

Links with and without visited states

    <a href="links.html">
        Standard link
    </a><br />
    <a href="links.html" class="link-visited">
        Link with visited state
    </a>

Standard link
Link with visited state

    <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>.

# These

have a

## Visited

state.

This one does not.