Det finns huvudsakligen fyra typer av länkar som används på webbplatsen.

Länkar i block

Länkar i block har en egen grafisk utformning och är understrukna med en pilformad linje. Länkarna förekommer i fyra olika färger på webbplatsen. Dessa färger är G5, G5.1, G3.1 och vit.



Textfärg: G5
Hex: 204440

 


Textfärg: G5.1
Hex: 10211F

 


Textfärg: G3.1
Hex: 367551

 


Textfärg: Vit
Hex: FFFFFF

 

Det finns en animation knuten till länkarna vilket sträcker ut pilen då användare för musen över dem.

Exempel på animering

 

I block ska det enbart finnas länkar som är pilformade (se bild nedan).

 

 

Undvik att jobba med mer än tre länkar per block. Vid ett stort antal länkar upplevs blocket som rörigt och förvirrande.

 

Det är rekommenderat att jobba med korta kärnfulla texter för länkarna. Försök att hålla ned antalet tecken i länktexten i den mån det går, cirka 25 tecken.

Länkar i brödtext

Länkar i brödtext kännetecknas av att brödtexten blir understruken med en grön linje.

 


Textfärg: G3.1
Hex: 367551

 

När användare för muspekaren över länken triggas en animering vilket flyttar understrykningen vertikalt från texten samtidigt som den tonas ut för att sedan återfinnas under texten. Exempel på animation och utseende:


Läs mer

 

I brödtextfält ska länkar endast skapas via texteditorns länkfunktion. Detta för att inte bryta mot designprinciper för brödtextfälten.

Undvik att stapla ett större antal länkar efter varandra i brödtextfältet, använd istället blocket för relaterade länkar. Detta för att tydligare strukturera länkar och underlätta för användaren att hitta det den söker.

 

Relaterade länkar

Relaterade länkar är ett block som är specifikt framtaget för att samla flertalet länkar. Detta block finns i två olika utföranden, enkelt och avancerat. Länkarna som förekommer i det enkla utförandet antar en annorlunda design jämfört med övriga block. 


Ett enkelt länkblock


Ett avancerat länkblock med vanliga länkar som beskrivet ovan om länkar i block.

 

Det enkla blocket kännetecknas av att länkarna har ett grafiskt element knutet till sig i form av en pil. Pilen ligger i direkt anslutning till länken och centreras vertikalt gentemot länktexten. Länkarna förekommer i två olika färger, G5 och vit, dessa baseras på bakgrundsfärgen på blocket.

 


Textfärg: Vit
Hex: FFFFFF


Textfärg: G5
Hex: 204440

 

Om användaren för musen en länk dämpas opaciteten på övriga länkar i blocket och pilen på aktuell länk sträcks ut. Detta för att indikera vart användaren är på väg.

 

 

Enkla länkblock ger användaren en bra överblick över länkarna och gör det lätt att hitta innehåll. Detta då länkarna är satta i ett stort teckensnitt och staplas efter varandra.

Undvik att stapla enkla länkblock innehållandes enstaka länkar på varandra. Lägg istället ihop dessa block till ett enda länkblock, alternativt kan ett antal innehållsblock användas för att guida användaren istället.

 

Länk i jobblista/nyhetslista 

Länkar i listor relaterade till jobbannonser eller nyhetsflöden kännetecknas av att de har ett tillhörande grafiskt element i form av en pil. Pilen är alltid placerad till höger om annonsens/nyhetens rubrik, se exempel nedan.

 


Textfärg: G5
Hex: 204440.

 

Länkar är alltid publicerade på en bakgrundsplatta av färgen T1 samt att textfärg alltid är G5.

Dessa länkar har en tillhörande animering. Då användaren för musen över annonsen/nyheten sträcks pilen ut den för att indikera att det är en länk. Vidare sänks även opaciteten på kringliggande annonser/nyheter.