HiVolda Styleguide

Page Header 

<header class="page-header" tabindex="-1" id="top">
    <div class="inner-row">
        <a href="#page-body" class="skip-link">Til hovedinnhold</a>
        <div class="header-top">
            <a href="" class="logo"><img src="/images/hivolda-logo.svg" alt="Forside høgskulen i Volda"></a>
            <a class="nav-toggle search" data-btn="search" href="#search" title="Åpne søk"></a>
            <a class="nav-toggle nav xlarge-down" data-btn="nav" href="#nav" title="Åpne meny"></a>
        </div>
        <nav class="page-navigation" role="navigation">
            <div class="nav-group" tabindex="-1" id="nav">
                <ul class="nav-primary">

                    <li class="nav-item"><a href="" class="nav-link">Studietilbod</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Studentliv</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Forsking</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Oppdrag og samarbeid</a></li>

                </ul>
                <ul class="nav-secondary">

                    <li class="nav-item"><a href="" class="nav-link">Studentsørvis</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Om Høgskulen i Volda</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Bibliotek</a></li>

                    <li class="nav-item"><a href="" class="nav-link">English</a></li>

                </ul>
                <a href="#top" class="nav-toggle nav-close xlarge-down" title="Lukk meny" data-btn="nav-close"></a>
            </div>
        </nav>
    </div>
</header>
<div class="search-group" tabindex="-1" id="search">
    <div class="inner-row">
        <form method="post" action="">
            <label for="page-seach" class="visuallyhidden">Søk her</label>
            <div class="input-button-group input-underline">
                <input type="search" value="" placeholder="Søk på hivolda.no" id="">

                <input value title="Søk" type="submit" href="http://testlenke.no" class="btn-search input-btn-search"></input>

            </div>

        </form>
        <a href="#top" class="nav-toggle search-close" data-btn="search-close" title="Lukk søk"></a>
    </div>
</div>
 
<header class="page-header" tabindex="-1" id="top">
  <div class="inner-row">
    <a href="#page-body" class="skip-link">Til hovedinnhold</a>
    <div class="header-top">
      <a href="" class="logo"><img src="/images/hivolda-logo.svg" alt="Forside høgskulen i Volda"></a>
      <a class="nav-toggle search" data-btn="search" href="#search" title="Åpne søk"></a>
      <a class="nav-toggle nav xlarge-down" data-btn="nav" href="#nav" title="Åpne meny"></a>
    </div>
    <nav class="page-navigation" role="navigation">
      <div class="nav-group" tabindex="-1" id="nav">
        <ul class="nav-primary">
          {% for item in nav_primary %}
          <li class="nav-item"><a href="{{ item.href }}" class="nav-link">{{ item.text }}</a></li>
          {% endfor %}
        </ul>
        <ul class="nav-secondary">
          {% for item in nav_secondary %}
          <li class="nav-item"><a href="{{ item.href }}" class="nav-link">{{ item.text }}</a></li>
          {% endfor %}
        </ul>
        <a href="#top" class="nav-toggle nav-close xlarge-down" title="Lukk meny" data-btn="nav-close"></a>
      </div>
    </nav>
  </div>
</header>
<div class="search-group" tabindex="-1" id="search">
  <div class="inner-row">
    <form method="post" action="">
      <label for="page-seach" class="visuallyhidden">Søk her</label>
      {% render "@component-input-button-group", search_form, true %}
    </form>
    <a href="#top" class="nav-toggle search-close" data-btn="search-close" title="Lukk søk"></a>
  </div>
</div>
 
{
  "search_form": {
    "input": {
      "type": "search",
      "placeholder": "Søk på hivolda.no"
    },
    "class": "input-underline"
  },
  "nav_primary": [
    {
      "text": "Studietilbod"
    },
    {
      "text": "Studentliv"
    },
    {
      "text": "Forsking"
    },
    {
      "text": "Oppdrag og samarbeid"
    }
  ],
  "nav_secondary": [
    {
      "text": "Studentsørvis"
    },
    {
      "text": "Om Høgskulen i Volda"
    },
    {
      "text": "Bibliotek"
    },
    {
      "text": "English"
    }
  ]
}

No notes defined.