*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 13 Next »

Figma component

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.

  • 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

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

  • 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

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

 

Item

Component type

Content type

Notes

1

Default

n/a

text

MANDATORY

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.

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

  • No labels