Links

Notes

  • links within body copy should be blue and underlined
  • links without surrounding text should not have a full stop at the end
  • link colours can be found in the colour palette
  • avoid ‘external link’ icons as they’re not well recognised
  • first establish if there’s a genuine need to know that the link is to an external site
  • if there is, use language to make it clear that this is the case
<!-- Start: @links--default -->
<p>
    <a href="#">A 19px link without surrounding text</a>
</p>

<p>
    <a href="#">A 19px body copy link</a>. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>

<a href="#" class="link-back">Back</a>
<!-- End: @links--default -->
 
<p>
  <a href="#">A 19px link without surrounding text</a>
</p>

<p>
  <a href="#">A 19px body copy link</a>. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>

<a href="#" class="link-back">Back</a>
 
/* No context defined for this component. */