Link

Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.

Released
Show details
Released
Published: February 27, 2024
Updated: February 27, 2024

Component

Usage

Placement

User action

Link

Shown in the form of text, either isolated or within a paragraph.

Isolated, or embedded in a paragraph

By clicking on it, the user will navigate elsewhere.

 

Anatomy

Structure

link

The only visual cue link has is the underline. Text style (font family, font size, colour, ...) should inherit from the context the link component is in.

E.g. if there is a link embedded in a paragraph, the link should have the same style as the paragraph plus the underline effect

 

Properties

Property

Value

Description

State

default hover disable

---

Behaviour

Interaction

 

Guidelines

Don't use link components in headers, Links should be restricted to the body copy.

Don't add extra text effects to your link. Link inherit text styles, plus the underline effect.