Sidhuvud

<jv-header type=mork content-ref="content">
  <div class="l-container " slot="content">
    <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/22.0.71/package/storybook-static/img/jordbruksverket-logotype--white-small.svg">
          </div>
          <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">
            <span> Behållare </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</jv-header>
<main class="l-container">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</main>

<jv-header type=ljus content-ref="content">
  <div class="l-container " slot="content">
    <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/22.0.71/package/storybook-static/img/jordbruksverket-logotype--brun-small.svg">
          </div>
          <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">
            <span> Behållare </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</jv-header>
<main class="l-container">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</main>

<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="img/jordbruksverket-logotype--white-small.svg">
          </div>
          <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">
            <span> Behållare </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="l-container">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</main>

<jv-header type="extern" content-ref="content" extended-content-ref="extended_content">
  <div class="l-container" slot="content">
    <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" src="https://cdn.jordbruksverket.se/designsystem/22.0.71/package/storybook-static/img/jordbruksverket-logotype.svg">
          </a>
          <div class="c-header__content__title__text">
            <a class="" tabindex="0"> Tjänstens namn </a>
          </div>
        </div>
        <div class="c-header__content__placeholder md:l-gap-110">
           <jv-dropdown open="false" btn-ref="triggerBtn" content-ref="content"
              extra-class="" options='{"size":"large","alignRight":true,"offset":2,"maxWidth":""}'>
            <button type="button" aria-haspopup="menu" class="c-btn c-btn--compact" slot="triggerBtn">
              <span aria-hidden="true" class="sjv-i-anvandare-cirkel"></span>
              <span>Kalle Testsson</span>
              <span class="sjv-i-caret-ner button-icon--right"></span>
            </button>
            <div slot="content" >
              <h4 style="color: var(--jv-gra-080)">Kalle Testsson</h4>
              <p style="color: var(--jv-gra-080)">
                Handläggare
              </p>
              <div class="c-space-100"></div>
              <jv-link-list>
                <ul>
                  <li>
                    <a href="#"class="c-link"><span>Utkast</span></a>
                  </li>
                  <li>
                    <a href="#"class="c-link"><span>Notiser</span></a>
                  </li>
                  <li>
                    <a href="#"class="c-link"><span>Inställningar</span></a>
                  </li>
                </ul>
              </jv-link-list>
              <hr>
              <div class="l-grid-col-1 l-gap-070">
                <jv-link theme="light">
                  <a href="https://www.jordbruksverket.se"><span class="sjv-i-anvandare-cirkel c-link__icon" aria-hidden="true"></span><span>Mina sidor</span></a></jv-link>
                <jv-link theme="light">
                  <a href="https://www.jordbruksverket.se"><span class="sjv-i-logga-ut c-link__icon" aria-hidden="true"></span><span>Logga ut</span></a></jv-link>
              </div>
            </div>
          </jv-dropdown>
        </div>
      </div>
    </div>
  </div>
</jv-header>
<div class="l-container" role="main">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</div>

<jv-header type="extern" content-ref="content" extended-content-ref="extended_content">
  <div class="l-container" slot="content">
    <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" src="https://cdn.jordbruksverket.se/designsystem/22.0.71/package/storybook-static/img/jordbruksverket-logotype.svg">
          </a>
          <div class="c-header__content__title__text">
            <a class="" tabindex="0"> Tjänstens namn </a>
          </div>
        </div>
        <div class="c-header__content__placeholder md:l-gap-110">
           <jv-dropdown open="false" btn-ref="triggerBtn" content-ref="content"
              extra-class="" options='{"size":"large","alignRight":true,"offset":2,"maxWidth":""}'>
            <button type="button" aria-haspopup="menu" class="c-btn c-btn--compact" slot="triggerBtn">
              <span aria-hidden="true" class="sjv-i-anvandare-cirkel"></span>
              <span>Kalle Testsson</span>
              <span class="sjv-i-caret-ner button-icon--right"></span>
            </button>
            <div slot="content" >
              <h4 style="color: var(--jv-gra-080)">Kalle Testsson</h4>
              <p style="color: var(--jv-gra-080)">
                Handläggare
              </p>
              <div class="c-space-100"></div>
              <jv-link-list>
                <ul>
                  <li>
                    <a href="#"class="c-link"><span>Utkast</span></a>
                  </li>
                  <li>
                    <a href="#"class="c-link"><span>Notiser</span></a>
                  </li>
                  <li>
                    <a href="#"class="c-link"><span>Inställningar</span></a>
                  </li>
                </ul>
              </jv-link-list>
              <hr>
              <div class="l-grid-col-1 l-gap-070">
                <jv-link theme="light">
                  <a href="https://www.jordbruksverket.se"><span class="sjv-i-anvandare-cirkel c-link__icon" aria-hidden="true"></span><span>Mina sidor</span></a></jv-link>
                <jv-link theme="light">
                  <a href="https://www.jordbruksverket.se"><span class="sjv-i-logga-ut c-link__icon" aria-hidden="true"></span><span>Logga ut</span></a></jv-link>
              </div>
            </div>
          </jv-dropdown>
          <div class="c-header__content__placeholder__subheader_actions">
            <jv-button  size="compact" full-width="none">
              <button type="button" ><span aria-hidden="true" class="sjv-i-hamburgermeny"></span>Meny</button>
            </jv-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</jv-header>
<div class="l-container" role="main">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</div>

<jv-header type="extern" content-ref="content" extended-content-ref="extended_content">
  <div class="l-container " slot="content">
    <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" src="https://cdn.jordbruksverket.se/designsystem/22.0.71/package/storybook-static/img/jordbruksverket-logotype.svg">
          </a>
          <div class="c-header__content__title__text">
            <a class="" tabindex="0"> Tjänstens namn </a>
          </div>
        </div>
        <div class="c-header__content__placeholder md:l-gap-110">
           <jv-dropdown open="false" btn-ref="triggerBtn" content-ref="content"
              extra-class="" options='{"size":"large","alignRight":true,"offset":2,"maxWidth":""}'>
            <button type="button" aria-haspopup="menu" class="c-btn c-btn--compact" slot="triggerBtn">
              <span aria-hidden="true" class="sjv-i-anvandare-cirkel"></span>
              <span>Kalle Testsson</span>
              <span class="sjv-i-caret-ner button-icon--right"></span>
            </button>
            <div slot="content" >
              <h4 style="color: var(--jv-gra-080)">Kalle Testsson</h4>
              <p style="color: var(--jv-gra-080)">
                Handläggare
              </p>
              <div class="c-space-100"></div>
              <jv-link-list>
                <ul>
                  <li>
                    <a href="#"class="c-link"><span>Utkast</span></a>
                  </li>
                  <li>
                    <a href="#"class="c-link"><span>Notiser</span></a>
                  </li>
                  <li>
                    <a href="#"class="c-link"><span>Inställningar</span></a>
                  </li>
                </ul>
              </jv-link-list>
              <hr>
              <div class="l-grid-col-1 l-gap-070">
                <jv-link theme="light">
                  <a href="https://www.jordbruksverket.se"><span class="sjv-i-anvandare-cirkel c-link__icon" aria-hidden="true"></span><span>Mina sidor</span></a></jv-link>
                <jv-link theme="light">
                  <a href="https://www.jordbruksverket.se"><span class="sjv-i-logga-ut c-link__icon" aria-hidden="true"></span><span>Logga ut</span></a></jv-link>
              </div>
            </div>
          </jv-dropdown>

          <div class="c-header__content__placeholder__subheader_actions">
            <jv-button  size="compact" full-width="none">
              <button type="button" onclick="document.dispatchEvent(new Event('jvHeaderToggleExtendedContent'))" aria-controls="extended_content"
              aria-expanded="false"><span aria-hidden="true" class="sjv-i-sok"></span>Sök</button>
            </jv-button>
            <jv-button  size="compact" full-width="none">
              <button type="button" ><span aria-hidden="true" class="sjv-i-hamburgermeny"></span>Meny</button>
            </jv-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="l-container " slot="extended_content" id="extended_content">
    <div class="l-container__inner">
      <div class="c-header__content">
        <form actions="" onsubmit="return false;" role="search">
          <jv-search  label="Sök dokument" valid="true" show-label="false">
          <input class="c-search__input"
                id="input2" name="" 
                type="search" >
          </jv-search>
        </form>
      </div>
    </div>
  </div>
</jv-header>
<div class="l-container" role="main">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</div>

<jv-header type="legacy" content-ref="content">
  <div class="l-container" slot="content">
    <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/22.0.71/package/storybook-static/img/jordbruksverket-logotype--white.svg">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="l-container " slot="content">
    <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">
            <span> Behållare </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</jv-header>
<div class="l-container" role="main">
  <div class="l-container__inner">
    <div class="content-margin">Innehållsyta</div>
  </div>
</div>