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 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.

Text links

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>

Inverse text links

Use inverse links when they sit on a dark background. Components with dark modifiers have inverse links built in, for example inverse panels.

• 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>

Heading links

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>

Download links

• 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.

CODE AREA

List links

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>

Edit on GitHub