Links allow users to move through applications and websites.

Links are used for navigating to other pages of a website, as opposed to actions like submitting or saving data.

When using links:

  • You can apply different typography styles
  • Use a valid href attribute so the link is accessible via keyboards and other assistive technologies
  • Don't use links to 'wrap' other actionable content, such as buttons, in the code

For actions such as ‘save’, ‘submit’, ‘cancel’ or ‘opt in’, use a button instead. This helps to create a consistent experience for users.

Links come in two types, inline and standalone.


Inline links appear within paragraphs or sentences. They’re used to direct users to content that’s not directly related to the journey they’re on.

Inline links should be underlined in their ‘normal’ state to help users easily identify them, regardless of colour, from their surrounding text content.

  • Interactive demo - Sainsbury's


Standalone links are separate to content and can be shown with or without an underline. They can appear after paragraphs or in menus, headers and footers.

Without underline

Standalone links are shown without an underline by default because often it's clear to the user that they're links. For instance, navigational links don't need an underline.

  • Interactive demo - Sainsbury's

With underline

Standalone links can be shown with an underline if you feel their context or position on the page doesn't make it clear enough that they're links.

  • Interactive demo - Sainsbury's


Brand theme links are used to give more emphasis to a link. They use a primary colour from the brand colour palette.

  • Interactive demo - Sainsbury's

Light and dark

Light and dark themed links are used to improve contrast against coloured backgrounds.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Copy guidelines

Include a verb to give the link a strong sense of action.

Make sure that link labels make it clear what content the link goes to.

Don’t use generic link text. Links shouldn’t need the context of supporting copy to make sense.

To read our terms and conditions, click here

Keep links as short as possible whilst still making them clear.

Standalone links should start with a capital letter, and don’t need a full stop.

Was this page helpful?

Get in touch

Our team can answer any questions about using links or give you a helping hand with your next project.
Select a theme to demo: