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

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

Sidhuvud för interna system

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">
          <a class="c-header__content--title__link" href="https://www.jordbruksverket.se">
            <img alt="Jordbruksverkets logo" role="presentation" class="c-header__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/18.4.7/package/dist/release/assets/img/jordbruksverket-logotype.svg">
          </a>
          <span class="c-header__content--title__divider"></span>
          <a class="c-header__content--title__text"> 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="container" role="main">
  <div class="row">
    <div class="col">Innehållsyta</div>
  </div>
</div>

Sidhuvud för e-tjänster

 

HTML
<header>
  <div class="c-header--black">
    <div class="l-container">
      <div class="l-container__inner">
        <div class="c-header--black__content">
          <div class="c-header--black__content--title">
            <a class="c-header--black__content--title__link" href="https://www.jordbruksverket.se">
              <img alt="Jordbruksverkets logo" role="presentation" class="c-header--black__content--title__logo" src="https://cdn.jordbruksverket.se/designsystem/18.4.7/package/dist/release/assets/img/jordbruksverket-logotype--white.svg">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-header--large">
    <div class="l-container">
      <div class="l-container__inner">
        <div class="c-header--large__content">
          <div class="c-header--large__content--title">
            <a class="c-header--large__content--title__text" tabindex="0"> Tjänstens namn </a>
          </div>
          <div class="c-header--large__content--placeholder">
            <div class="l-col l-align-center">
              <a> Behållare </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container" role="main">
  <div class="row">
    <div class="col">Innehållsyta</div>
  </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide