altinn-designsystem/dist/patterns/02-organismer-01-globale-90-header-altinnett/02-organismer-01-globale-90-header-altinnett.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<nav class="a-jumpnav">
  <ul class="no-decoration d-flex">
    <li><a class="sr-only sr-only-focusable" href="#content">Hopp til hovedinnholdet</a></li>
    <li><a class="sr-only sr-only-focusable" href="#primary-nav">Hopp til hovedmeny</a></li>
    <li><a class="sr-only sr-only-focusable" href="#search">Hopp til søk</a></li>
  </ul>
</nav>

<!-- Begin .header -->
<header class="an-header   a-js-hideElement ">
  <!-- Begin .container -->
  <div class="container">
    <div class="row">
      <div class="col-12">

        <!-- Begin .a-globalNav -->
        <nav id="primary-nav" class="a-globalNav">
          <a href="&#x2F;patterns&#x2F;04-sider-altinnett-10-forside-10-forside&#x2F;04-sider-altinnett-10-forside-10-forside.html" class="a-globalNav-logo">
                        <img src="..&#x2F;..&#x2F;images&#x2F;an-logo-blue.svg" alt="Altinnett logo" class="an-logo a-logo--an a-modal-top-logo ">
                        <span class="sr-only">Til forsiden</span>
                    </a>
          <button class="navbar-toggler navbar-toggler--an d-md-none" type="button">
              <span class="sr-only">Vis/skjul meny</span>
    			  </button>

          <div class="collapse navbar-toggleable-sm a-globalNav-main" id="exCollapsingNavbar2">
            <ul class="" id="exCollapsingNavbar">
              <li class="d-md-none">
                <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->

                <div class="form-group a-form-group   ">

                  <label class="a-form-label  sr-only  " for="dropdown-input-search">Søk etter innhold</label>

                  <div class="a-form-group-items input-group   ">


                    <input class="form-control  
         a-hasButton  " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="dropdown-input-search">

                    <div class="input-group-append">
                      <button onclick="location.href='/patterns/04-sider-altinnett-60-sok-00-sokeside/04-sider-altinnett-60-sok-00-sokeside.html';" class="btn btn-secondary" type="button">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span class="sr-only">Søk</span>
          </button>
                    </div>



                  </div>



                </div>

                <!-- END: 00-atomer-01-forms-10-tekst-input -->

              </li>

              <li><a class="a-hvr-underline " href="#">produkter</a></li>
              <li><a class="a-hvr-underline " href="#">eksempler</a></li>
              <li><a class="a-hvr-underline " href="#">utvikling</a></li>
            </ul>
          </div>
        </nav>
        <!-- End .a-globalNav -->

        <ul id="secondary-nav" class="nav nav-pills a-header-options">

          <li class="nav-item dropdown d-none d-md-block">

            <button class="a-collapse-title a-btn a-btn-icon nav-link an-search" type="button" data-toggle="collapse" data-target="#collapseSearchContent" aria-expanded="false" aria-controls="collapseSearchContent">
                <span>
                    <i class="ai ai-search an-search-icon" aria-hidden="true">
                      <span class="sr-only">Søk</span></i>
                  </span>
              </button>
          </li>
        </ul>
        <!-- End .a-globalNav-options -->

      </div>
      <!-- End .col -->

    </div>
    <!-- End .row -->

  </div>
  <!-- End .container -->

</header>
<!-- End .header -->

<!-- Begin .a-collapseContent -->
<div id="collapseSearchContent" class="a-collapseContent adocs-collapseSearch collapse">
  <div class="a-collapseContent-inside px-0">
    <div class="a-bgGreyLight pt-3 pb-3">
      <div class="container">
        <div class="row a-bgGreyLight arrow-tr">
          <div class="col-sm-8 offset-sm-2 col-lg-6 offset-lg-3">
            <div class="form-group a-form-group  a-form-group-large">
              <label class="a-h2" for="topbar-search-by">Hva leter du etter?</label>
              <div class="a-form-group-items input-group">
                <input data-search-input="" id="topbar-search-by" class="form-control a-hasButton" type="text" placeholder="Søk etter innhold" autofocus="">
                <div class="input-group-append">
                  <button class="btn btn-secondary" type="submit" name="search-button" id="topbar-search-submit" aria-label="Search">
                        <i class="ai ai-search" aria-hidden="true"></i>
                        <span class="sr-only">Søk</span>
                        </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End .a-collapseContent -->
<div class="pt-3"></div>
<!-- END: 02-organismer-01-globale-90-header-altinnett -->