Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Overskrifter
Overskrifter strukturerer siden, giver overblik og hjælper brugeren og skærmlæseren til at kunne overskue sidens logik og opbygning.
Sådan bruges overskrifter
Overskriftstyperne har to formål:
- De skaber et visuelt hierarki på siden.
- De fungerer som sidens indholdsfortegnelse for skærmlæsere.
En god struktur i sidens overskrifter er altafgørende for, at brugere af skærmlæser kan forstå og navigere i indholdet på siden. Det er muligt at følge en stringent struktur i overskrifter for skærmlæsere og samtidig tilpasse overskrifternes visuelle udtryk til brugere, der orienterer sig visuelt.
Hvornår skal du bruge overskrifter?
Du skal bruge overskrifter til at skabe struktur på din side og gruppere dit indhold i logiske og overskuelige bidder, både for skærmlæsere og visuelt orienterede brugere.
Hvornår skal du overveje anden formatering end overskrifter?
Du skal bruge anden formatering end overskrifter, hvis du vil fremhæve eller ændre styling af tekst, som ikke har betydning for strukturen på siden. Brug fx beskeder til information, brug lister til at fremhæve særlige punkter med punktopstilling eller anvend stor tekst til at markere udvalgte dele af teksten.
Hvis du vil vide mere
Designværdier
Designværdierne nedenfor er angivet i px for læsbarhedens skyld. Vær opmærksom på, at det anbefales i ens stylesheet at bruge relative værdier til skriftstørrelse og en “unitless” talværdi for linjehøjden. I designsystemets stylesheet er overskrifternes skriftstørrelse defineret med “rem”.
| Skriftstørrelse | Linjehøjde | Teksttykkelse | |
|---|---|---|---|
| Overskrift 1 |
|
|
Bold (700) |
| Overskrift 2 |
|
|
Semi-bold (600) |
| Overskrift 3 |
|
|
Semi-bold (600) |
| Overskrift 4 |
|
|
Semi-bold (600) |
| Overskrift 5 | 16px | 24px | Semi-bold (600) |
| Overskrift 6 | 14px | 20px | Medium (500) |
Overskrift som link
| Tekstdekoration | Tekstfarve | |
|---|---|---|
| Overskrift, som er et link | Understreget |
|
Anvendes til
Overskrift som links kan anvendes på sider, hvor brugeren kan navigere til andre sider i samme selvbetjeningsløsning.
Anvendes ikke til
Må ikke bruges til at fremhæve links eller som erstatning for standard links i selvbetjeningsløsninger.
Overskrift i søgeresultat
| Tekstdekoration | Tekstfarve | |
|---|---|---|
| Overskrift i søgeresultat |
|
|
Anvendes til
Søgeresultatlinks bruges til at skabe en overskuelig struktur i søgeresultater.
Anvendes ikke til
Må ikke anvendes til at fremhæve links i tekst eller som erstatning for standard links.
Løsningstitel i header
Anvendes til
Anvendes i header som titel på hele løsningen. Titlen bør derved være den samme på hver side.
Anvendes ikke til
Anvendes ikke andre steder end i headeren.
Subheading
| Skriftstørrelse | Linjehøjde | Teksttykkelse | Farve | Letter-spacing | |
|---|---|---|---|---|---|
| Subheading | 14px | 16px | Regular (400) | #747474 | 1px |
Anvendes til
Anvendes til at tilføje sekundær tekst til en overskrift.
Anvendes ikke til
Må ikke anvendes som en enkeltstående overskrift.
HTML Struktur
<h1>Overskrift 1</h1>
<h2>Overskrift 2</h2>
<h3>Overskrift 3</h3>
<h4>Overskrift 4</h4>
<h5>Overskrift 5</h5>
<h6>Overskrift 6</h6>Hold en stram overskriftsstruktur i koden. En <h3> altid er under en <h2>, en <h4> under en <h3> osv. <h1> er altid øverst i hierarkiet.
Lad være med at springe overskriftsled over. Hvis du visuelt vil have et andet udtryk, så brug en klasse til at style overskriften.
Eksempel på en overskrift, der ligner et andet niveau
<h2 class="h3">Dette er en h2 overskrift, som ligner en h3</h2>Subheading
Læs retningslinjer for subheadings.
HTML Struktur
<div class="subheading">Dette er en subheading</div>