Länkar

Länkar läggs inte inne i brödtexten utan ska presenteras som eget stycke i anslutning till brödtexten. Länkar är alltid understrukna och har en färg som följer WCAG 2.1 AA.

Textlänkar

Länkar ska ha en ikon framför sig som hjälper till att förmedla karaktären på länkens mål, exempelvis en dokument-ikon framför en länk till en rapport.

Vissa länkar ha ett eget utseende om sammanhanget kräver det. Exempel på det är länkar i sidfoten och "Läs vidare"-länkar i nyhetslistningar som är ett mellanting mellan knappar och textlänkar.

Textlänkar har annars samma grundläggande typografi som Brödtext.

Egenskaper

text-decoration: underline

color: förslagsvis #222222, annars avvikande färg enligt WCAG 2.1

Mouseover: ingen understrykning

Exempel

Länksamling

På vissa sidor behöver man lägga in flera länkar som man vill hålla samman på något sätt, exempelvis flera olika bilagor till ett huvuddokument. Detta kan åstadkommas i form av länksamlingar. I en länksamling grupperas länkar tydligt under en rubrik och beskrivande text som framhäver länkarnas betydelse och mål.

Varje länk ramas in med bakgrundsfärg för att underlätta den visuella grupperingen under varje kategori. Rutan har en ljus färg som är tillräckligt stark för att besökaren ska se grupperingen, men samtidigt möta kontrastkraven enligt WCAG 2.1 AA.

Länkarnas utseende är i övrigt samma som vanliga textlänkar.

Egenskaper

background-color: valfritt, så länge det följer WCAG 2.1

border-radius: 4px

Höjd: 58px

Minsta marginal: 20px 0 40px

Marginal under länkar: 5px

Padding vänster/höger: 20px

Mouseover: 30-40 % av webbplatsens primärfärg, ingen understrykning

Exempel

Grundläggande typografi