Link

How to use links

Links are used for navigating to other pages of a website, as opposed to actions like submitting or saving data.

When using links:

• You can apply different typography styles
• Use a valid href attribute so the link is accessible via keyboards and other assistive technologies
• Don't use links to 'wrap' other actionable content, such as buttons, in the code

For actions such as ‘save’, ‘submit’, ‘cancel’ or ‘opt in’, use a button instead. This helps to create a consistent experience for users.

Types of links

Links come in two types, inline and standalone.

Inline

Inline links appear within paragraphs or sentences. They’re used to direct users to content that’s not directly related to the journey they’re on.

Inline links should be underlined in their ‘normal’ state to help users easily identify them, regardless of colour, from their surrounding text content.

<p>
  <Link href="#" color="alpha">
    Use our stock checker
  </Link>{" "}
  to see if the product you want is in stock.
</p>

Standalone

Standalone links are separate to content and can be shown with or without an underline. They can appear after paragraphs or in menus, headers and footers.

Without underline

Standalone links are shown without an underline by default because often it's clear to the user that they're links. For instance, navigational links don't need an underline.

<Link href="#" color="alpha" bare>
  Go to stock checker
</Link>

With underline

Standalone links can be shown with an underline if you feel their context or position on the page doesn't make it clear enough that they're links.

<Link href="#">Go to stock checker</Link>

Link themes

Brand

Brand theme links are used to give more emphasis to a link. They use a primary colour from the brand colour palette.

<>
  <List type="bare" className="ln-u-text-align-center">
    <ListItem type="bare">
      <p>
        <Link href="#" color="alpha">
          Use our stock checker
        </Link>{" "}
        to see if the product you want is in stock.
      </p>
    </ListItem>
    <ListItem type="bare">
      <p>
        <Link href="#" bare color="alpha">
          Go to stock checker
        </Link>
      </p>
    </ListItem>
    <ListItem type="bare">
      <p>
        <Link href="#" cta bare color="alpha">
          Go to stock checker
        </Link>
      </p>
    </ListItem>
  </List>
</>

Light and dark

Light and dark themed links are used to improve contrast against coloured backgrounds.

<>
  <List type="bare" className="ln-u-text-align-center">
    <ListItem type="bare">
      <p>
        <Link href="#">Use our stock checker</Link> to see if the product you
        want is in stock.
      </p>
    </ListItem>
    <ListItem type="bare">
      <p>
        <Link href="#" bare>
          Go to stock checker
        </Link>
      </p>
    </ListItem>
    <ListItem type="bare">
      <p>
        <Link href="#" cta bare>
          Go to stock checker
        </Link>
      </p>
    </ListItem>
  </List>
</>

<>
  <List type="bare" className="ln-u-text-align-center">
    <ListItem type="bare">
      <p className="ln-u-color-white">
        <Link href="#" color="light">
          Use our stock checker
        </Link>{" "}
        to see if the product you want is in stock.
      </p>
    </ListItem>
    <ListItem type="bare">
      <p>
        <Link href="#" bare color="light">
          Go to stock checker
        </Link>
      </p>
    </ListItem>
    <ListItem type="bare">
      <p>
        <Link href="#" cta bare color="light">
          Go to stock checker
        </Link>
      </p>
    </ListItem>
  </List>
</>

Copy guidelines

Include a verb to give the link a strong sense of action.

Make sure that link labels make it clear what content the link goes to.

Don’t use generic link text. Links shouldn’t need the context of supporting copy to make sense.

Keep links as short as possible whilst still making them clear.

Standalone links should start with a capital letter, and don’t need a full stop.

Was this page helpful?