Link

A link component can be used to navigate between the pages or navigate to a different site. The default link component is simple, but by using and combining the different modifiers, links can be visually changed for different use cases.

Decorated

A decorated link is originally a default link, but with a more advanced styling. It is used to indicate a link that is more important than a default link and can be used as part of cards or right next to a button.

On hover the line slides into a different color.

An orange variant exists, but there is no modifier available because it can only be used within the cards molecule.

px 

			
				<a class="a-link a-link--decorated " href="#">
	<span class="a-link__text">Decorated link</span>
</a>

Default

Make use of the default link to create an url to another page, document, ... . On hover the link will be underlined.

px 

			
				<a class="a-link  " href="#">
	<span class="a-link__text">Default link</span>
</a>

In light color

  • a-link--light
px 

			
				<a class="a-link a-link--light " href="#">
	<span class="a-link__text">Light link</span>
</a>

In orange

px 

			
				<a class="a-link a-link--orange " href="#">
	<span class="a-link__text">Orange links</span>
</a>
<a class="a-link a-link--orange " href="#">
	<span class="a-link__icon icon-alert"></span>
	<span class="a-link__text">Orange links</span>
</a>
<a class="a-link a-link--orange " href="#">
	<span class="a-link__text">Orange links</span>
	<span class="a-link__icon icon-alert"></span>
</a>

With arrow

Shares the same explanation and properties as the large arrow link. But it is less important than the large arrow link and is used exclusively in a list type layout.

px 

			
				<a class="a-link a-link--arrow " href="#">
	<span class="a-link__icon icon-arrow-double-right"></span>
	<span class="a-link__text">Arrow link</span>
</a>

With large arrow

The large arrow link can be considered as the secondary link type is used to display links that are less important but need to be able to stand out on their own (for example as a section on a page) and as part of a "set" of links rather than a single item.

On hover the link moves slightly to the right.

px 

			
				<a class="a-link a-link--large a-link--arrow " href="#">
	<span class="a-link__icon icon-arrow-double-right"></span>
	<span class="a-link__text">Secondary link</span>
</a>

Documentation

Modifiers

  • a-link--decorated

    Create a link which is visually more styled with a colored underline

  • a-link--large

    Increase the font-size and line-height of the link along with its icons

  • a-link--arrow

    Very specific and contextual modifier, which should only be used when there is an arrow icon applied to create an arrow-link or large-arrow-link. This will move the text of the link slightly to the right when hovering.

  • a-link--light

    Create a link that will give the text a more light grey-ish color

  • a-link--orange

    Create a link where the color of the text and icon will change to a more orange theme