Links

A link should be descriptive of the place it’s taking the user. For example: “Start making your will”.

Example

Example

HTML

                                
<!-- Text link -->
<p><a class="coop-t-link" href="#">Start making your will</a></p>

<h3>Links with icons</h3>

<!-- Text link with arrow SVG (pink) -->
<p><a class="coop-t-link coop-t-link--arrow" href="#">More about <span class="coop-t-nowrap">offers<svg class="coop-t-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" aria-hidden="true" focusable="false"><path class="coop-u-brand-membership-pink-bright-fill" d="M13.89 0L11.4 2.46l5.87 5.8H0v3.48h17.28l-5.88 5.8L13.89 20 24 10z" stroke="none"/></svg></span></a></p>

<!-- Text link with arrow SVG (orange) -->
<p><a class="coop-t-link coop-t-link--arrow" href="#">More about <span class="coop-t-nowrap">offers<svg class="coop-t-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" aria-hidden="true" focusable="false"><path class="coop-u-brand-membership-orange-bright-fill" d="M13.89 0L11.4 2.46l5.87 5.8H0v3.48h17.28l-5.88 5.8L13.89 20 24 10z" stroke="none"/></svg></span></a></p>

<!-- Text link with arrow SVG (yellow) -->
<p><a class="coop-t-link coop-t-link--arrow" href="#">More about <span class="coop-t-nowrap">offers<svg class="coop-t-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" aria-hidden="true" focusable="false"><path class="coop-u-brand-membership-yellow-bright-fill" d="M13.89 0L11.4 2.46l5.87 5.8H0v3.48h17.28l-5.88 5.8L13.89 20 24 10z" stroke="none"/></svg></span></a></p>

<!-- Text link with arrow SVG (green) -->
<p><a class="coop-t-link coop-t-link--arrow" href="#">More about <span class="coop-t-nowrap">offers<svg class="coop-t-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" aria-hidden="true" focusable="false"><path class="coop-u-brand-membership-green-bright-fill" d="M13.89 0L11.4 2.46l5.87 5.8H0v3.48h17.28l-5.88 5.8L13.89 20 24 10z" stroke="none"/></svg></span></a></p>

                                

Design and content

A link should always be displayed as above unless it’s used on a background colour, in which case is can be black or white.

Links that are in context, for example within a header or footer — can be styled differently.

See the link colours.

Links should:

  • be colour contrast checked.
  • be underlined regardless of what colour they are.
  • use the hand/pointer to indicate that the link is clickable.

Accessibility

Link text can be read out of context and should always tell the user where it’s taking them — never use ‘click here’. Find out how we write link text.

Find out how we write link text.

For more information see our general guide on accessibility.