Link

How to use links

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

When using links:

• Use the typography styles of Link 1, Link 2 or Caption Link
• 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

Types of links

Links come in two types, inline and standalone.

Inline

Inline links appear within paragraphs or sentences. They’reused 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.

Use the same typography style for inline links as for their surrounding text content.

Standalone

Standalone links are separate to content and can be shown with or without an underline.

Only use standalone links for navigation or in a menu where it's clear they're among a group of links.

Link schemes

Brand

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

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

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?