Versions Compared

Version Old Version 9 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. Note

To be added:

  • Explain how retailer link works in Storybook

    • Explain what all variants are

    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.

    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