Sidhuvud

Sidhuvud, det vill säga header, finns högst upp på sidan och innehåller alltid namnet på tjänsten samt Jordbruksverkets logga. Den kan också innehålla annan information som till exempel information om inloggning.

Alternativa komponenter

Komponent och kod

Sidhuvud för interna system

Vi rekommenderar att sidhuvudet för interna system är i fullbredd, det vill säga täcker hela sidans bredd. För att få sidhuvudet i fullbredd byter du ut CSS-klassen "container" mot "container-fluid".

<header class="c-header c-header--white">
    <div class="container">
        <div class="c-header__content">
            <img class="c-header__content_logo" src="https://cdn.jordbruksverket.se/designsystem/10.0.0/package/dist/release/assets/img/logo2.png" alt="Jordbruksverket logo">
            <span class="divider"></span>
            <a class="c-header__content_title"> Tjänstens namn </a>
        </div>
        <div class="c-header__content_placeholder">
            <a> Behållare </a>
        </div>
    </div>
</header>
<div role="main" class="container">
    <div class="row">
        <div class="col">
            Innehållsyta
        </div>
    </div>
</div>

Sidhuvud för e-tjänster

 

<header class="c-header c-header--white">
    <div class="c-header--medium">
        <div class="container">
            <div class="c-header__content--medium">
                <img class="c-header__content_logo" src="https://cdn.jordbruksverket.se/designsystem/10.0.0/package/dist/release/assets/img/logo2.png" alt="Jordbruksverket logo">
            </div>
            <div class="c-header__content_placeholder">
                <a>Behållare</a>

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

    <div class="c-header--large">
        <div class="container">
            <div class="c-header__content">
                <a class="c-header__content_title--large"> Tjänstens namn </a>
            </div>
            <div class="c-header__content_placeholder">
                <a> Behållare </a>
            </div>
        </div>
    </div>
</header>
<div role="main" class="container">
    <div class="row">
        <div class="col">
            Innehållsyta
        </div>
    </div>
</div>

Senast publicerad 2020-11-19

Sidansvarig för sidan är Styleguide