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.
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.
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.
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.
Brand theme links are used to give more emphasis to a link. They use a primary colour from the brand colour palette.
Light and dark
Light and dark themed links are used to improve contrast against coloured backgrounds.
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.