Link Styles

<h1>Link styles</h1>

<p>These styles are typically used for journey-specific links, or links capturing a particular data type/action. They should not be used as in-text links.</p>
<p>Two of the provided modified classes – <code>link--standalone</code> and <code>link--emphasized</code> – can be composed with other classes and each other. The rest will override each other, as they are denoted by icons.</p>

<h3> Inline links </h3>
<ul>
    <li><a href="#" class="link">Basic link</a> Eu veniam dolore.</li>
    <li><a href="#" class="link link--standalone">Standalone link</a> Sunt culpa anim amet.</li>
    <li><a href="#" class="link link--emphasized">Emphasized link</a></li>
</ul>

<h3> Links with icons </h3>
<ul>
    <li><span class='file__download--inline'><a href="#">Download link </a><span class="file-size">[PDF 2.1MB]</span></span>
    </li>
    <li><a href="#" class="link link--download">Download link</a></li>
    <li><a href="#" class="link link--email">E-mail link</a></li>
    <li><a href="#" class="link link--message">Message link</a> (used for linking to contact forms)</li>
    <li><a href="#" class="link link--phone">Telephone link</a></li>
    <li><a href="#" class="link link--fax">Fax link</a></li>
</ul>

<h3> Links with arrow </h3>