Inline links

Links can be a text or graphic that is clickable and is used for users to navigate the web, moving within a site or to external related sites through clicks.

Guidelines

A link should have an underline mainly on hover, so the user understands that the link is clickable.

  • The exception is when a link is hard to see in a body text, and in that case the link can be underlined at all time

Do's and don'ts

Do

  • If the background is in a darker color, it’s recommended to have the link in white with an underline. The text should be in a medium size. 
  • Button versus links: In most cases buttons are used for actions and links for navigation. 
  • When a link is used in a flow and has an icon, the icon should be placed in the same direction as the flow. So for example when a user should go through a wizard flow - from left to right. The icon should then be placed on the right side of the link. Otherwise the icon should be placed on the left side of the link. 

Don't

  • Don’t use arrows in a list of links, because it can be interpreted as an accordion. 
  • Avoid making links of a complete section of body text

Specification

Colour

  • Link: Dark blue 2, medium
  • Hover: Dark blue 2, underlined

States