Skip to main content

This is a new service - your feedback will help us to improve it.

Links


About

Buttons and links are items used to perform an action on a page

It's important to know when to use a link or a button

Links should be used when a users action won’t affect the website at all, examples of these are:

  • Certain call to actions
  • Links to internal or external pages

What do the link attritubes mean?

The href attritube is used to define the link address

The target attritube is used to define where to open the linked document. See below to find out more about the target attritube

The title attritube is used to define additional information about the link. It's useful for your users and accessibility. Try not to duplicate your link text- this hurts usability as hard of sight users using screen readers will here the same text twice.

Target attritube values:

  • _blank: Will load clicked link in a new window
  • _self: Will load clicked link in the same frame as it was clicked in
  • _parent: Will load clicked link in the parent frameset
  • _top: Will load clicked link in the full body of the window
  • framename: Will load clicked link in a named frame



Default link

What does it do?

  • Highlight that the word or phrase is different from other body text

When to use it?

  • When the link is within text
  • When the link is part of a list of links

When not to use it?

  • The start of a process
  • When the link is a destructive action

Component example

HTML Markup

<a href="#" title="link title" target="_self" class="wmcads-link" >link text
  
</a>



Back link

What does it do?

  • Help users go back to the previous page in a multi-page transaction

When to use it?

  • Only use a back link on transactional services or multi-page forms.

When not to use it?

  • Never use it together with breadcrumbs. Do user research to find out if users find breadcrumbs or the back link easier to use.
  • Within COVID-19 services, user research found that too many links on the page distracted users.
  • Do not use the back link on a content page.

How it works?

  • Always place back links at the top of the page.
  • Make sure the link takes users to the previous page they were on, in the state they last saw it.
  • If you cannot do this you should hide the back link. For example, when JavaScript is not available.

Component example

HTML Markup

<a href="#" title="link title" target="_self" class="wmcads-link" >&lt; Back
  
</a>



Link with icon

What does it do?

  • Helps identify the type of link

When to use it?

  • For download links
  • For links which go to external websites

When not to use it?

  • Any links that link to internal pages

Component example

HTML Markup

<a href="#" title="link title" target="_self" class="wmcads-link wmcads-link--with-icon" >Download Annual Plan (PDF, 8MB)<svg class="wmcads-link__icon wmcads-link__icon--right">
      <use xlink:href="#wmcads-general-icon-action-download" href="#wmcads-general-icon-action-download"></use>
    </svg>
  
</a>
<a href="#" title="link title" target="_self" class="wmcads-link wmcads-link--with-icon" >External link <svg class="wmcads-link__icon wmcads-link__icon--right"> <use xlink:href="#wmcads-general-icon-external-link" href="#wmcads-general-icon-external-link"></use> </svg> </a>



Primary buttons

What does it do?

  • Encourages the most desired action you want visitors to take.
  • Attracts attention on the page.

When to use it?

  • When you need a strong visual indicator to help user to complete their journey and do their task.
  • When you need action oriented button. Think: 'Done', 'Save', 'Next', 'Submit'.

When not to use it?

  • What action you want users to take is not essential in completing their task.
  • When a button is a destructive action.
  • When a button starts a process or journey.

Component example

HTML Markup

<a href="#" title="This is a primary link" target="_self" class="wmcads-btn wmcads-btn--primary">
  Primary button
</a>
<a href="#" title="This is a primary link" target="_self" class="wmcads-btn wmcads-btn--primary"> Primary icon button <svg class="wmcads-btn__icon general-icon-chevron-right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </a>



Secondary buttons

What does it do?

  • Indicates action that is less important than call to action primary.
  • When used together with call to action and primary button it creates visual hierarchy.
  • Highlights an inessential action.

When to use it?

  • To indicate lower priority than call to action and primary button.
  • To create a clear hierarchy of priority and importance of actions.
  • When a button is inessential for continuing the user journey.

When not to use it?

  • When you need a strong visual indicator to help user to complete their journey and do their task.
  • When a button is essential for continuing the user journey
  • When a button is a destructive action
  • When a button starts a process or journey

Component example

HTML Markup

<a href="#" title="This is a secondary link" target="_self" class="wmcads-btn wmcads-btn--secondary">
  Secondary button
</a>
<a href="#" title="This is a secondary link" target="_self" class="wmcads-btn wmcads-btn--secondary"> Secondary icon button <svg class="wmcads-btn__icon general-icon-chevron-right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </a>



Destructive button as link

What does it do?

  • Shows that the button's action deletes or removes something

When to use it?

  • When an action is destructive
  • Example: deleting a favourite route, removing a swift card, deleting an account

When not to use it?

  • When a button starts a process or journey
  • When a button is trying to attract the user's attention

Component example

HTML Markup

<a href="#" title="This is a destructive link" target="_self" class="wmcads-btn wmcads-btn--destructive">
  Destructive button
</a>
<a href="#" title="This is a destructive link" target="_self" class="wmcads-btn wmcads-btn--destructive"> Destructive icon button <svg class="wmcads-btn__icon general-icon-chevron-right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </a>



Start button as link

What does it do?

  • Shows that the button starts a process or journey

When to use it?

  • When a button starts a process or journey

When not to use it?

  • When a button is a destructive action
  • When a button is trying to attract the user's attention
  • When the button is inessential for continuing the user journey

Component example

HTML Markup

<a href="#" title="This is a start link" target="_self" class="wmcads-btn wmcads-btn--start">
  Start button
</a>
<a href="#" title="This is a start link" target="_self" class="wmcads-btn wmcads-btn--start"> Start icon button <svg class="wmcads-btn__icon general-icon-chevron-right"> <use xlink:href="#wmcads-general-icon-chevron-right" href="#wmcads-general-icon-chevron-right"></use> </svg> </a>