Styleguide

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

Sidhuvud med meny

Komponent och kod

Komponenten driftsattes första gången i version 5.2.0.

Sidhuvud för interna system

Tjänstens namn

Behållare

Innehållsyta

HTML

<header class="c-header ">
  <div class="l-container">
    <div class="l-container__inner">
      <div class="c-header__content">
        <div class="c-header__content__title">
          <div class="c-header__content__title__link">
            <img alt="Jordbruksverkets logo" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/20.0.45/package/dist/release/assets/img/jordbruksverket-logotype--white-small.svg">
          </div>
          <span class="c-header__content__title__divider"></span>
          <span class="c-header__content__title__text"> Tjänstens namn </span>
        </div>
        <div class="c-header__content__placeholder">
          <div class="l-col l-align-center">
            <a> Behållare </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="l-container">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</main>

Sidhuvud för e-tjänster

Tjänstens namn

Behållare

Innehållsyta

HTML

<header class="c-header c-header--large">
  <div class="l-container">
    <div class="l-container__inner">
      <div class="c-header__content">
        <div class="c-header__content__title">
          <a class="c-header--black__content--title__link" href="https://www.jordbruksverket.se">
            <img alt="Jordbruksverkets logo"  class="c-header--black__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/19.3.10/package/dist/release/assets/img/jordbruksverket-logotype--white.svg">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="l-container">
    <div class="l-container__inner">
      <div class="c-header__content">
        <div class="c-header__content__title">
          <a class="c-header__content__title__text" tabindex="0"> Tjänstens namn </a>
        </div>
        <div class="c-header__content__placeholder">
          <div class="l-col l-align-center">
            <a> Behållare </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="l-container" role="main">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</div>

Senast publicerad 2024-08-13

Sidansvarig för sidan är Styleguide