There are primarily four types of links used on the website.

Links in blocks

Links in blocks have their own design. They are underlined with an arrow. The links appear in four different colors on the website: G5, G5.1, G3.1 and white.



Text color: G5
Hex: 204440

 


Text color: G5.1
Hex: 10211F

 


Text color: G3.1
Hex: 367551

 


Text color: White
Hex: FFFFFF

 

There is an animation associated with the links, which extends the arrow when the user moves the mouse over them.

Example of animation

 

Links in blocks should only have the arrow underline (see image below).

 

 

Avoid using more than three links per block — a larger number of links will make the block seem cluttered and confusing.

 

Short pithy captions are recommended for links. Try to keep down the number of characters in the link text as far as possible, to about 25 characters.

Links in body text

Links in body text are underlined with a green line.

 


Text color: G3.1
Hex: 367551

 

When the user moves the mouse cursor over the link, this triggers an animation that moves the underline vertically away from the text while it fades, and then reappears below the text. Example of animation and appearance:


Läs mer

 

Links in body text fields should only be created using the text editor’s link function, in order to avoid violating the design principles for body text fields.

Avoid stacking a large number of links in the body text field; use the block for related links instead, to structure the links more clearly and make it easier for the user to find what they are looking for.

 

Related links

Related links is a block specifically developed to gather multiple links. There are two different versions of this block: simple and advanced. The links that appear in the simple version adopt a different design from other blocks.


A simple link block.


An advanced link block with common links as described above concerning links in blocks.

 

In simple blocks, the links are connected with an arrow as a graphic element. The arrow is located right next to the link and centered vertically in relation to the link text. The links appear in two colors, G5 and white, based on the background color of the block.

 


Text color: White
Hex: FFFFFF


Text color: G5
Hex: 204440

 

If the user moves the mouse over a link, the other links in the block fade and the arrow for the relevant link extends, to indicate where the user is going.

 

 

Simple link blocks give users a good overview of the links, and make it easy to find content since the links are in large fonts and are stacked in a series.

Avoid stacking simple link blocks containing single links on top of one another. Combine these blocks into a single link block instead; or several content puff blocks may be used to guide the user instead.

 

Link in a job list/news list

Links in lists related to job advertisements or news feeds are connected with an arrow as a graphic element. The arrow is always located on the right of the heading of the advertisement/news item. See the example below.

 


Textfärg: G5
Hex: 204440.

 

Links are always published on a background tile with the color T1, and the text color is always G5.

These links have animations. When the user moves the mouse over the advertisement/news item, the arrow extends outwards to indicate that it is a link, while the surrounding advertisements/news items fade.