A link is an interactive textual element used for navigation.

General guidelines
Best practices
  • Use links inside paragraphs, for bullet lists, or after editorial content.
  • Write descriptive wording to guide the user.
  • Don’t use links with more than 3 words and 30 characters
  • Make it obvious: the cue to select a link should be unambiguous, for a key action choose a button.
  • Prefer ghost buttons for actions modifying the page (view more, edit, etc.) or to add an icon next to the link.

Use non-underlined links by default, especially for internal links. It’s important particularly for links in left and tabbed navigation, as well as on bullet lists, for better readability.


Use underlined links to emphasise the content, or for external links.

It can be used for specific components like breadcrumbs, or to open a page in a new tab.

Visual guidelines


Links have 6 states: default, hover, active/current, focus, visited, and disable.
It is available in light and in dark.



Links have 3 sizes: large, medium and small.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top