Gå til sidens indhold

Vælg et tema

Luk

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Headers

Installation

HTML Struktur

<header class="header">

    <!--1A: Portal header -->
    <div class="portal-header portal-header-compact">
        <div class="container portal-header-inner">
            <a href="javascript:void(0);" title="Hjem"
                class="logo alert-leave">
            </a>
            <button
                class="button button-secondary button-menu-open js-menu-open ml-auto d-print-none"
                aria-haspopup="menu" title="Åben mobil menu">Menu</button>

            <!-- 1B: Portal header: info + actions-->
            <div class="portal-info">

                <p class="user"><span class="username">Christian Emil
                        Vestergaard Christiansen, Forsikringens
                        Forsikringsfirma</span> </p>

                <button
                    class="button button-secondary alert-leave d-print-none">
                    Log af
                </button>
            </div>
        </div>
    </div>

    <!--2A: Solution header -->
    <div class="solution-header ">
        <div class="container solution-header-inner">
            <div class="solution-heading">
                <a href="#" title="Hjem" class="alert-leave2">
                    Løsningstitel
                </a>
            </div>

            <!--2B: Solution header: Authority name + text-->
            <div class="solution-info ">
                <!-- nav-secondary -->

                <p class="h5 authority-name"> Myndighedsnavn</p>

                <p>Support: 12 34 56 78</p>

            </div>
        </div>
    </div>

    <div class="overlay"></div>
    <nav class=" nav">
        <!-- collapsible-->
        <button
            class="button button-tertiary button-menu-close js-menu-close"
            title="Luk mobil menu"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk</button>

        <div class="portal-info-mobile">
            <p class="user bold">Lone Hansen</p>
            <a href="#" class="button button-secondary button-signout">
                Log af
            </a>
        </div>

        <div class="solution-info-mobile">
            <p class="bold">Myndighedsnavn</p>
            <p>Support: 12 34 56 78</p>
        </div>

    </nav> <!-- collapsible nav end-->
</header>

Portal header

Portal header indeholder portalens logo samt info om hvem, der er logget ind.

Denne del bør altid indgå i en header.

Portal headeren kan gøres kompakt med klassen portal-header-compact.

Løsningsheader

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.

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.

Hovedmenu

Hovedmenuen indeholder selve løsningens navigation.

Ekstra rækker

Ekstra navigationsrækker kan indeholde alt lige fra knapper, links til modalvinduer, 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();