Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Header
Installation
HTML Struktur
<header class="header">
</header>
Nedenstående dele indsættes i et header
element under body
.
Portal (Obligatorisk)
Portal header indeholder portalens logo samt info om hvem, der er logget ind.
Denne del bør altid indgå i en header.
<div class="portal-header portal-header-compact">
<div class="container portal-header-inner">
<a href="#" aria-label="Portalnavn" class="logo"><span
class="d-none d-print-block">Portalnavn</span></a>
<button
class="function-link button-menu-open js-menu-open ml-auto d-print-none"
aria-haspopup="menu"
title="Åben mobil menu"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#menu"></use></svg>Menu</button>
<div class="portal-info">
<p class="user">Anders Andersen, Forsikringens Forsikringsfirma
</p>
<button
class="button button-secondary alert-leave d-print-none">
Log af
</button>
</div>
</div>
</div>
Hvis man har en header uden navigation skal man stadig tilføje en mobilmenu, da den viser data fra headeren, som normalt skjules i mobilvisning.
Løsning (Obligatorisk)
Løsningsheaderen indeholder løsningens titel samt info om, hvilken myndighed, der står bag løsningen.
Denne del bør altid indgå i en header.
<div class="solution-header">
<div class="container solution-header-inner">
<div class="solution-heading">
<a href="#" class="alert-leave2">En længere løsningstitel</a>
</div>
<div class="solution-info">
<p class="h5 authority-name">Myndighedsnavn</p>
<p>Support: 12 34 56 78 <span class="d-print-none">· <a
href="#"
class="icon-link function-link alert-leave">Kontakt<svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#open-in-new"></use></svg></a></span>
</p>
</div>
</div>
</div>
Navigation (Obligatorisk)
Navigationsområdet kan indeholde flere rækker med forskellige former for navigation.
Alt indhold i <nav>
elementet vil på små skærme bliver vist i en skjult menu, som vises ved tryk på menu-knappen. Som standard vises denne menu, når skærmen er mindre end 992px bred. Man kan indstille hvornår, der skal bruges denne menu via variablen $nav-responsive-breakpoint
.
Navigation kun til mobil
Hvis man har en header uden navigation skal nedenstående stadig tilføjes, da det er en menu der kan åbnes på mobil som viser information fra headeren som ellers bliver skjult.
Hvis man har en navigation i headeren skal man bruge en af de andre herunder.
Hovednavigation
Hovednavigation med ekstra navigationsrækker
Ekstra navigationsrækker kan indeholde alt lige fra knapper, links til modaler, overflow menuer og sidst funktionslink.
Hvis man laver en header med lidt indhold, er det anbefalet at man indstiller $nav-responsive-breakpoint
til at have en lavere værdi, fx. 768px.
JavaScript
Mobil menuen kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med nedenstående:
new DKFDS.Navigation().init();