Links

Links say where they go; they look like links

In a sentence

Underlined, so colour is never the only sign.

The tax return is due on Oct 31. Read the returns or the tax report.

Show the code

<p>The tax return is due on Oct 31. Read <a class="link" href="tax-returns.html">the returns</a> or the <a class="link" href="tax-report.html">tax report</a>.</p>

Standing alone

A 24 px target, with an arrow when it leads on.

Sales report Back to the dashboard

Show the code

<div class="cluster">
<a class="link" href="sales-report.html">Sales report</a>
<a class="link" href="index.html">
<i class="ti ti-arrow-left">
</i>Back to the dashboard</a>
</div>

Quiet links

In lists and cards, the whole row is the link.

Show the code

<ul class="list">
<li>
<a class="list-link" href="product-detail.html">
<span class="list-ico" aria-hidden="true">
<i class="ti ti-package">
</i>
</span>
<div class="grow">
<b>Butter croissant</b>
<small>Bakery · $3.50</small>
</div>
</a>
</li>
<li>
<a class="list-link" href="product-detail.html">
<span class="list-ico" aria-hidden="true">
<i class="ti ti-package">
</i>
</span>
<div class="grow">
<b>Cappuccino</b>
<small>Hot drinks · $4.20</small>
</div>
</a>
</li>
</ul>