Versions Compared

Version Old Version 12 New Version 13
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:Figma:
panelIconText:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconIdefa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:Storybook:
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.

<insert image here> Image Added

 

Item

Component type

Content type

Notes

1

XDefaultX

n/a

Xtext

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.

Used to link to secondary content on a page.

Used for links in the footer

Used for links in the primary navigation component.

Used in the product header for selecting product quantities.

Used in the product header for linking to retailers.

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

    • Explain what all variants are

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