<p>LINKS</p>
<p>
  <a class="link" href="#">Standard link</a> <i>.link</i>
</p>
<p>
  <a class="link link--bold" href="#">Bold link</a> <i>.link</i>
</p>

<p class="bg--black" style="padding: 5px;">
  <a class="link" href="#">White link</a>
  <i>.link</i>
</p>

<p>
  <a class="link" href="#">An incredibly long link to illustrate linebreaks:Vivamus suscipit tortor eget felis porttitor volutpat.
  </a> <i>.link</i>
</p>

<div class="bg--dark-grey" style="padding: 10px;">
  <p class="bg--light-grey" style="padding: 5px;">
    <a class="link" href="#">A link to show nested bg-colour rules working properly</a>
    <i>.link</i>
  </p>
</div>


<h3 style="margin-top: 30px;">Inline Link</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue <a href="#" class="link inline">inline link</a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue</p>