/
Link

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

Link

Owned by Nick Harris
Last updated: Jan 03, 2023
4 min read

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.

1 Usage | 2 Anatomy | 3 Visual style | 4 Editorial | 5 Behaviour | 6 Accessibility

Usage

Do’s

  • 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

Links vs Buttons

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:

Links that look like buttons

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.

Anatomy

Anatomy of a secondary link

 

Item

Component type

Content type

Notes

 

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

 

Visual style

<explain different types of links>

<Explain size>

Primary

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

Secondary

Used to link to secondary content on a page.

Subtle

Used for links in the footer

Nav

Used for links in the primary navigation component.

Selector

Used in the product header for selecting product quantities.

Retailer

Used in the product header for linking to retailers.

Heading

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

Editorial

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

Behaviour

  • Links are triggered by the enter key.

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

Accessibility

  • 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