<h3> Default link styling </h3>
<a class="link" href="#">
  Link
</a>
<p> Link has the class <i>link</i></p>

<p>
  This is <a class="link inline" href="#">an example</a> of an inline link.
</p>
<p>Inline link has an extra class <i>inline</i></p>

<h3> Coloured link styling </h3>

<p>
  <a class="link link--SR20-red" href="#">
     SR20-red link
  </a>
</p>
<p>
   <a class="link link--SR20-red inline" href="#">SR20-red link</a> inline.
</p>


<p>
  <a class="link link--SR20-dark-blue " href="#">
     SR20-dark-blue link
  </a>
</p>
<p>
   <a class="link link--SR20-dark-blue  inline" href="#">SR20-dark-blue link</a> inline.
</p>


<p>
  <a class="link link--SR20-deep-violet" href="#">
     SR20-deep-violet link
  </a>
</p>
<p>
   <a class="link link--SR20-deep-violet inline" href="#">SR20-deep-violet link</a> inline.
</p>


<p>
  <a class="link link--SR20-yellow " href="#">
     SR20-yellow link
  </a>
</p>
<p>
   <a class="link link--SR20-yellow inline" href="#">SR20-yellow link</a> inline.
</p>


<p>
  <a class="link link--SR20-green" href="#">
     SR20-green link
  </a>
</p>
<p>
   <a class="link link--SR20-green inline" href="#">SR20-green link</a> inline.
</p>
</div>

<p>
  <a class="link link--SR20-cyan-blue" href="#">
     SR20-cyan-blue link
  </a>
</p>
<p>
   <a class="link link--SR20-cyan-blue inline" href="#">SR20-cyan-blue link</a> inline.
</p>
</div>

<p>
  <a class="link link--SR20-purple" href="#">
     SR20-purple link
  </a>
</p>
<p>
   <a class="link link--SR20-purple inline" href="#">SR20-purple link</a> inline.
</p>
</div>


<div style="background: black; padding: 20px;">
<p>
  <a class="link link--SR20-white" href="#">
     SR20-white link
  </a>
</p>
<p>
   <a class="link link--SR20-white inline" href="#">SR20-whitelink</a> inline.
</p>
</div>