Versions Compared

Version Old Version 8 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel2
typeflat
separatorpipe
Panel
panelIconId1f517293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:linkFigma:
panelIconText🔗:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
bgColor#F4F5F7

Storybook component

A Link is a basic navigational element that allows users to navigate through your website or application. They may appear on their own, within a sentence or paragraph, or directly following content.

Table of Contents
minLevel1
maxLevel2
typeflat
separatorpipe
Tip

  • Use a link to allow users to navigate to a new page or a section of the same page.

  • Use clear and descriptive link text

Warning

  • Use links to allow the user to perform an action that doesn’t result in a new page load or location.

  • Use “Click here“ as the link text

  • Alter the link styling in way that impacts accessibility

Links and buttons have different behaviours and generally have distinct visual styling that differentiate from each other.

There are clear use cases that help you decide whether a link or a button is the appropriate interactive element:

Panel
bgColor#F4F5F7

  • Navigating the user to a new page

  • Actions that result in a change to the URL

  • Actions that result in a browser refresh

  • Jumping to a section on the same page

Panel
bgColor#F4F5F7

  • Toggling display views

  • Opening a modal

  • Triggering a popup menu

  • Interacting with media

  • Adding or removing elements to a selection

In some cases links are styled to look like buttons to increase their prominence and align their styles with other interactive elements of a webpage. This should be avoided as much as possible, although design and brand choices sometimes make this difficult. Use your best judgement when designing link styles to determine if a button like style is necessary.

Image Added

 

Item

Component type

Content type

Notes

1

Default

n/a

text

Status
colourRed
titleMANDATORY

2

Hover

n/a

text

3

Focus

n/a

text

4

Active

n/a

text

5

Visited

n/a

text

6

Selected

n/a

text

<explain different types of links>

<Explain size>

Used for the primary CTA on a page, linking to primary content.

Image Added

Used to link to secondary content on a page.

Image Added

Used for links in the footer

Image Added

Used for links in the primary navigation component.

Image Added

Used in the product header for selecting product quantities.

Image Added

Used in the product header for linking to retailers.

Image Added

Used in headings to link to further content. Heading links can be applied to app heading sizes. Note

To be added:

Explain how retailer link works in Storybook

Image Added

  • Links must be kept short and to the point.

  • Avoid using “Click here” or “Start here” and provide descriptive text so the user knows where they are navigating

  • Provide alt text that can be read by screen readers to provide more context.

  • Use sentence-case for link text. Screen readers will ready capitalised links letter by letter.

  • Links are triggered by the enter key.

  • Links change style based on whether the user has visited the destination before.

  • Ensure an appropriate aria-label is used

  • Use concise and meaningful text for links

  • Avoid the use of “Click here“, “More“, “Read more“, “Find out more” etc

  • Do not capitalise the text in links.

  • Don’t use URLs for link text

  • Do not use the word "link" as part of the link text

  • Link’s should open in the same tab