Their primary usage is as a navigational element. They can also be used as a replacement for a button in space constrained situations (tables, forms, panels) or when you need less visual prominence to perform an action.

Basics

  • links should follow the same sizing as containing copy
  • use rel="noopener external", rel="noopener", rel="next" and rel="prev" and other link types{:rel="noopener external"} where applicable

Wording

The wording of links is very important and should be contextual and meaningful. Link text should tell the user where they are going. DO NOT write ‘click here’ as a link! ‘Read more’ and other such phrases are also bad practice. Screen readers read out links as a list, so link text needs to be descriptive. Avoid making links too long.

  • provides some information when read out of context
  • explains what the link offers
  • doesn't talk about mechanics
  • is not a verb phrase.

Links are designed by default to sit on a light background.

  • links within body copy should be blue and underlined
  • links without surrounding text should not have a full stop at the end
  • use @include links-default in SASS to force link styles.
<p>
    <a href="#">A link with surrounding text</a>
</p>
<p>
    This is a <a href="#">body copy link</a> diam sem, interdum non scelerisque id, condimentum in arcu. Vivamus faucibus mollis mi ut ultrices. Quisque sed ultrices justo.
</p>

Use inverse links when they sit on a dark background. Components with dark modifiers have inverse links built in, for example [inverse panels]({{ site.baseurl }}{% link components/panel.md %}#inverse-dark-panel).

  • Use .link--inverse on an individual link
  • or use .inverse-links on a containing element
  • use @include links-inverse in SASS on custom dark background components.
<div class="pv--d ph--d inverse-links" style="background: #393939;">
    <ul>
        <li><a href="#">links on a</a></li>
        <li><a href="#">dark background</a></li>
    </ul>
</div>

<div class="panel" style="background: #393939;">
    <p>
        <a class="link--inverse" href="#">individual link on dark background</a>
    </p>
</div>

The default styling is blue and underlined, to indicate that it’s a clickable link, but depending on the context in that the heading link appears, some of these rules could be relaxed. Check that your users understand this.

<h1><a href="#">This is a heading 1</a></h1>
<h2><a href="#">This is a heading 2</a></h2>
<h3><a href="#">This is a heading 3</a></h3>
<h4><a href="#">This is a heading 4</a></h4>
<h5><a href="#">This is a heading 5</a></h5>
<h6><a href="#">This is a heading 6</a></h6>
  • it’s good practice to tell the user if they are downloading a media file
  • warn the user what the file type and the size is
  • to display further information on the file, place next to the size and type.
<p>
    <a href="#"><span class="icon icon--download" aria-hidden="true"></span> Costing report</a> PDF 281.92 kB
</p>
<p>
    <a href="#"><span class="icon icon--download" aria-hidden="true"></span> Costing report</a> PDF 281.92 kB | 16 April 2010
</p>

When you need to group related links.

<ul class="list list--unstyled">
    <li><a target="_blank" rel="noopener external" href="https://www.nice.org.uk/guidance/published?type=csg">Cancer service guidelines</a></li>
    <li><a target="_blank" rel="noopener external" href="https://www.nice.org.uk/guidance/published?type=cg">Clinical guidelines</a></li>
    <li><a target="_blank" rel="noopener external" href="https://www.nice.org.uk/guidance/published?type=ph">Public health guidelines</a></li>
    <li><a target="_blank" rel="noopener external" href="https://www.nice.org.uk/guidance/published?type=sc">Social care guidelines</a></li>
    <li><a target="_blank" rel="noopener external" href="https://www.nice.org.uk/guidance/published?type=sg">Safe staffing guidelines</a></li>
</ul>