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

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 c-header--black">
  <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>

Ljus bakgrund

Den här komponenten kommer på sikt att tas bort från styleguiden, och är ersatt av sidhuvudet med mörk bakgrund.

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">
          <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/20.0.45/package/dist/release/assets/img/jordbruksverket-logotype--small.svg">
          </a>
          <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>
<div class="l-container" role="main">
  <div class="l-container__inner">
    <div>Innehållsyta</div>
  </div>
</div>

Sidhuvud för e-tjänster

 

Tjänstens namn
Behållare
Innehållsyta
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/19.3.10/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">
            <span class="c-header--large__content--title__text"> Tjänstens namn </span>
          </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="l-container" role="main">
  <div class="l-container__inner">
    <div>Innehållsyta</div>
  </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide