11 - Navigation

11.1 - Top-nav

Requires javascript

The primary part of the top-nav is global across all products. Some elements require javascript to work properly. See documentation for db.libs.topnav.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <div class="brand-owner">
      <a href="//www.dagbladet.no/">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 390"><g fill="none" fill-rule="nonzero"><path fill="#D60000" d="M0 390V0h117v390z"/><path fill="#FFF" d="M90.3 282.3c13.2-.4 15-9.5 15-19.2 0-7-1.7-12.3-5.1-15.7-2.8-2.8-6.8-4.3-11.7-4.3H28.8V258h4.3c-3.6 2.5-5.5 6.1-5.7 10.7 0 4.6 2 8.1 6.1 10.4 3.1 1.8 7.3 2.7 12 2.7h25c5.4 0 10.2-1.7 13.2-4.6 2.3-2.3 3.5-5.2 3.5-8.8 0-3.4-1.5-6.6-4.5-9.6h8.4c2.6.1 3.1.8 3.3 3.6.1 1.6-.1 2.6-.6 3.1-.6.6-1.8.7-3.4.7l-.1 16.1zm-16.5-19.7c0 1-.3 1.8-.8 2.3-.7.7-2 1.1-3.8 1.1H47.4c-2.8.1-5-.4-5.9-1.3-.5-.5-.7-1-.7-1.7 0-1.1.3-1.9.9-2.5.9-.9 2.5-1.3 5-1.3H68c4.1-.1 5.8.9 5.8 3.4zm-46.4-50.4c0 4.4 1.4 7.9 4 10.1H11.7v15.9h76.6v-14.9h-4c3.4-2.5 5.5-6.5 5.7-10.8-.3-8.9-6.9-13.3-19.5-13.3h-25c-3.7 0-10.7.6-14.8 4.8-2.2 2.2-3.3 4.9-3.3 8.2zm41.7 2.9c2.3 0 5.3 0 6.8 1.4.5.5.8 1.3.8 2.2 0 .7-.2 1.2-.7 1.7-1.2 1.2-4 1.9-7.8 1.9H48.8c-2.4 0-5.7-.2-7.2-1.6-.6-.6-.8-1.3-.8-2.2 0-.8.2-1.4.7-1.9 1.4-1.4 4.6-1.4 6.7-1.4 0-.1 20.9-.1 20.9-.1zm-41.7-63c0 7.3 1.8 12.7 5.4 16.2 3.1 2.9 7.4 4.3 12.8 4h.8v-15.9h-1.3c-4.1-.3-6.6-.4-6.6-4.7 0-1 .3-1.8 1-2.4.8-.8 2.1-1.3 3.5-1.3h2.7c3.8 0 4.9 3.6 6.3 8.5.3 1.1.6 2.2 1 3.3 2.1 6.5 5.9 13.1 17.9 13.1h4.8c4.3 0 7.9-1.4 10.5-3.9 2.5-2.5 3.8-5.9 3.8-10 0-5.3-1.8-8.4-4.9-11.5h3.3V132H43.6c-5.4 0-9.1 1.2-11.7 3.8-3.1 3-4.5 8.2-4.5 16.3zm50.4.2c0 1.4-.4 2.5-1.2 3.3-.8.8-2 1.2-3.4 1.2h-3.6c-3.3 0-4.9-1.6-5.8-3-.8-1-1.4-2.4-2.1-3.9-.3-.7-.6-1.4-1-2.1H71c3.1.2 6.8 1 6.8 4.5zm-50.4 154c0 7.3 1.8 12.7 5.4 16.1 3.1 2.9 7.4 4.3 12.8 4h.8v-15.9h-1.3c-4.1-.3-6.6-.4-6.6-4.7 0-1 .3-1.8 1-2.4.8-.8 2.1-1.3 3.5-1.3h2.7c3.8 0 4.9 3.6 6.3 8.5.3 1.1.6 2.2 1 3.3 2.1 6.5 5.9 13.1 17.9 13.1h4.8c4.3 0 7.9-1.4 10.5-3.9 2.5-2.5 3.8-5.9 3.8-10 0-5.3-1.8-8.4-4.9-11.5h3.3v-15.4H43.6c-5.4 0-9.1 1.2-11.7 3.8-3.1 3.1-4.5 8.3-4.5 16.3zm50.4.3c0 1.4-.4 2.5-1.2 3.3-.8.8-2 1.2-3.4 1.2h-3.6c-3.3 0-4.9-1.6-5.8-3-.8-1-1.4-2.4-2.1-3.9-.3-.7-.6-1.4-1-2.1H71c3.1.2 6.8 1 6.8 4.5zM11.7 104.3v.5h20.4c-3.1 2.7-4.7 6-4.7 9.8 0 12.1 13.8 13 18.1 13h25c12.6 0 19.2-4.5 19.5-13.3 0-4-2.1-7.9-5.8-10.6h4.2V88.8H11.7v15.5zm36.7 7.4c-2.2 0-5.5 0-7-1.5-.5-.5-.8-1.2-.8-2.2 0-.6.2-1.1.6-1.6.8-.8 2.8-1.8 8.1-1.8h19.4c5.9 0 7.9.9 7.9 3.6 0 .8-.2 1.5-.7 1.9-1.4 1.4-4.5 1.4-6.6 1.4H48.8c0 .2-.4.2-.4.2zm-21-47.4c0 6.2 1.4 11 4 14.3 3 3.8 7.8 5.8 14.1 5.8h28c4.7 0 8.5-1.4 11.3-4.3 4.4-4.4 5.2-11 5.2-15.8-.1-6.9-1.9-12-5.5-15.3-3.4-3.1-8.2-4.5-14.5-4.2h-.8v15.8h2.3c2.4.1 4.6.2 5.7 1.4.6.6.8 1.5.7 2.8-.2 3.2-2.9 3.7-4.5 3.7H64V44.3H42.8c-4.2 0-7.6 1.3-10.2 3.9-4.4 4.4-5.3 11.2-5.2 16.1zm25.5-4.1v8.3h-8.5c-2.4 0-4-.5-5-1.4-.7-.7-1-1.6-1-2.8 0-1.1.4-2 1.1-2.7 1-1 2.4-1.3 3.3-1.3h10.1v-.1zM28.8 22.6H18.2v15.9h10.7v4h11.9v-4h35.9c3.9 0 7-1.1 9.1-3.2 2.2-2.2 3.3-5.4 3.3-9.6 0-3.3-.4-6.4-.8-9.3l-.1-.7H76.6v.9c0 .9 0 2.4.2 3.7 0 .9-.2 1.4-.5 1.7-.4.4-1.1.6-2.2.6H40.8v-6.8h-12v6.8zm-13.9 316c-3 5.2-3.3 12.1-3.3 18.2v17.5h76.6v-21.6c0-4.7-.4-10-3.3-14.5-2.9-4.7-7.9-7-15.2-7.1H32.2c-6.3 0-13.4.9-17.3 7.5zm47.8 9.3c5.2 0 8.6-.2 10.3 1.6 1.2 1.3 1.7 3.6 1.5 7.2H25.4c.2-6.8.7-8.8 7.7-8.8h29.6zm16.1-173c0 1.4-.3 2.3-.9 3-.8.8-2.3 1.2-4.5 1.2H11.7V195h59.7c6.9 0 11.4-1.7 14.2-5.3 2.3-3.1 3.3-7.5 3.3-14.7H78.8v-.1z"/></g></svg>
      </a>
    </div>
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
</header>

11.1.1 - Search

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <div class="brand-owner">
      <a href="//www.dagbladet.no/">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 390"><g fill="none" fill-rule="nonzero"><path fill="#D60000" d="M0 390V0h117v390z"/><path fill="#FFF" d="M90.3 282.3c13.2-.4 15-9.5 15-19.2 0-7-1.7-12.3-5.1-15.7-2.8-2.8-6.8-4.3-11.7-4.3H28.8V258h4.3c-3.6 2.5-5.5 6.1-5.7 10.7 0 4.6 2 8.1 6.1 10.4 3.1 1.8 7.3 2.7 12 2.7h25c5.4 0 10.2-1.7 13.2-4.6 2.3-2.3 3.5-5.2 3.5-8.8 0-3.4-1.5-6.6-4.5-9.6h8.4c2.6.1 3.1.8 3.3 3.6.1 1.6-.1 2.6-.6 3.1-.6.6-1.8.7-3.4.7l-.1 16.1zm-16.5-19.7c0 1-.3 1.8-.8 2.3-.7.7-2 1.1-3.8 1.1H47.4c-2.8.1-5-.4-5.9-1.3-.5-.5-.7-1-.7-1.7 0-1.1.3-1.9.9-2.5.9-.9 2.5-1.3 5-1.3H68c4.1-.1 5.8.9 5.8 3.4zm-46.4-50.4c0 4.4 1.4 7.9 4 10.1H11.7v15.9h76.6v-14.9h-4c3.4-2.5 5.5-6.5 5.7-10.8-.3-8.9-6.9-13.3-19.5-13.3h-25c-3.7 0-10.7.6-14.8 4.8-2.2 2.2-3.3 4.9-3.3 8.2zm41.7 2.9c2.3 0 5.3 0 6.8 1.4.5.5.8 1.3.8 2.2 0 .7-.2 1.2-.7 1.7-1.2 1.2-4 1.9-7.8 1.9H48.8c-2.4 0-5.7-.2-7.2-1.6-.6-.6-.8-1.3-.8-2.2 0-.8.2-1.4.7-1.9 1.4-1.4 4.6-1.4 6.7-1.4 0-.1 20.9-.1 20.9-.1zm-41.7-63c0 7.3 1.8 12.7 5.4 16.2 3.1 2.9 7.4 4.3 12.8 4h.8v-15.9h-1.3c-4.1-.3-6.6-.4-6.6-4.7 0-1 .3-1.8 1-2.4.8-.8 2.1-1.3 3.5-1.3h2.7c3.8 0 4.9 3.6 6.3 8.5.3 1.1.6 2.2 1 3.3 2.1 6.5 5.9 13.1 17.9 13.1h4.8c4.3 0 7.9-1.4 10.5-3.9 2.5-2.5 3.8-5.9 3.8-10 0-5.3-1.8-8.4-4.9-11.5h3.3V132H43.6c-5.4 0-9.1 1.2-11.7 3.8-3.1 3-4.5 8.2-4.5 16.3zm50.4.2c0 1.4-.4 2.5-1.2 3.3-.8.8-2 1.2-3.4 1.2h-3.6c-3.3 0-4.9-1.6-5.8-3-.8-1-1.4-2.4-2.1-3.9-.3-.7-.6-1.4-1-2.1H71c3.1.2 6.8 1 6.8 4.5zm-50.4 154c0 7.3 1.8 12.7 5.4 16.1 3.1 2.9 7.4 4.3 12.8 4h.8v-15.9h-1.3c-4.1-.3-6.6-.4-6.6-4.7 0-1 .3-1.8 1-2.4.8-.8 2.1-1.3 3.5-1.3h2.7c3.8 0 4.9 3.6 6.3 8.5.3 1.1.6 2.2 1 3.3 2.1 6.5 5.9 13.1 17.9 13.1h4.8c4.3 0 7.9-1.4 10.5-3.9 2.5-2.5 3.8-5.9 3.8-10 0-5.3-1.8-8.4-4.9-11.5h3.3v-15.4H43.6c-5.4 0-9.1 1.2-11.7 3.8-3.1 3.1-4.5 8.3-4.5 16.3zm50.4.3c0 1.4-.4 2.5-1.2 3.3-.8.8-2 1.2-3.4 1.2h-3.6c-3.3 0-4.9-1.6-5.8-3-.8-1-1.4-2.4-2.1-3.9-.3-.7-.6-1.4-1-2.1H71c3.1.2 6.8 1 6.8 4.5zM11.7 104.3v.5h20.4c-3.1 2.7-4.7 6-4.7 9.8 0 12.1 13.8 13 18.1 13h25c12.6 0 19.2-4.5 19.5-13.3 0-4-2.1-7.9-5.8-10.6h4.2V88.8H11.7v15.5zm36.7 7.4c-2.2 0-5.5 0-7-1.5-.5-.5-.8-1.2-.8-2.2 0-.6.2-1.1.6-1.6.8-.8 2.8-1.8 8.1-1.8h19.4c5.9 0 7.9.9 7.9 3.6 0 .8-.2 1.5-.7 1.9-1.4 1.4-4.5 1.4-6.6 1.4H48.8c0 .2-.4.2-.4.2zm-21-47.4c0 6.2 1.4 11 4 14.3 3 3.8 7.8 5.8 14.1 5.8h28c4.7 0 8.5-1.4 11.3-4.3 4.4-4.4 5.2-11 5.2-15.8-.1-6.9-1.9-12-5.5-15.3-3.4-3.1-8.2-4.5-14.5-4.2h-.8v15.8h2.3c2.4.1 4.6.2 5.7 1.4.6.6.8 1.5.7 2.8-.2 3.2-2.9 3.7-4.5 3.7H64V44.3H42.8c-4.2 0-7.6 1.3-10.2 3.9-4.4 4.4-5.3 11.2-5.2 16.1zm25.5-4.1v8.3h-8.5c-2.4 0-4-.5-5-1.4-.7-.7-1-1.6-1-2.8 0-1.1.4-2 1.1-2.7 1-1 2.4-1.3 3.3-1.3h10.1v-.1zM28.8 22.6H18.2v15.9h10.7v4h11.9v-4h35.9c3.9 0 7-1.1 9.1-3.2 2.2-2.2 3.3-5.4 3.3-9.6 0-3.3-.4-6.4-.8-9.3l-.1-.7H76.6v.9c0 .9 0 2.4.2 3.7 0 .9-.2 1.4-.5 1.7-.4.4-1.1.6-2.2.6H40.8v-6.8h-12v6.8zm-13.9 316c-3 5.2-3.3 12.1-3.3 18.2v17.5h76.6v-21.6c0-4.7-.4-10-3.3-14.5-2.9-4.7-7.9-7-15.2-7.1H32.2c-6.3 0-13.4.9-17.3 7.5zm47.8 9.3c5.2 0 8.6-.2 10.3 1.6 1.2 1.3 1.7 3.6 1.5 7.2H25.4c.2-6.8.7-8.8 7.7-8.8h29.6zm16.1-173c0 1.4-.3 2.3-.9 3-.8.8-2.3 1.2-4.5 1.2H11.7V195h59.7c6.9 0 11.4-1.7 14.2-5.3 2.3-3.1 3.3-7.5 3.3-14.7H78.8v-.1z"/></g></svg>
      </a>
    </div>
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
</header>

11.1.2 - Navigation

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </nav>
  </div>
</header>

11.1.3 - Dropdown

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

11.1.4 - Buttons

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" class="button light small"><span class="icon-Userfemale"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Share"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Settings"></span></a></li>
      </ul>
    </div>
  </div>
</header>

11.1.5 - User login

Global login. Note that the template for the login is rendered in the client in the placeholder #js-user.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" data-dropdown="js-user" class="button light small">Logg inn</a></li>
      </ul>
    </div>
  </div>
  <div id="js-user" data-dropdown-content class="f-dropdown small content user-login"></div>
</header>

11.1.7 - Navigation small screens

(Only visible on small viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>

11.1.8 - In app

(Only visible on small viewports) Adding is-app will hide the primary navigation.

Demo

<a class="button" onclick="$('#top-navigation-inapp-test').topnav('toggleSmallNavigation'); return false;">Demo</a>
<header id="top-navigation-inapp-test" class="top-nav is-app" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">Meny</a>
  </div>
</header>

11.2 - Secondary

Requires javascript

The secondary navigation should be contextual and should reveal links and information that is more relevant to the section or service.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <h1>
      <a>
        <div class="section-icon tiny" style="background-color: rgb(140, 174, 45);">
          <span class="icon-Lab"></span>
        </div>
        Section name
      </a>
    </h1>
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.2.1 - Secondary dropdown

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <h1>
      <a>
        <div class="section-icon tiny" style="background-color: rgb(140, 174, 45);">
          <span class="icon-Lab"></span>
        </div>
        Section name
      </a>
    </h1>
    <nav>
      <ul id="js-navigation">
        <li><a>Item 1</a></li>
        <li class="has-dropdown">
          <a data-dropdown="drop5">Item 2</a>
          <ul id="drop5" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a data-dropdown="drop6">Item 3</a>
          <ul id="drop6" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.2.2 - Secondary dropdown

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
  <div class="secondary">
    <nav>
      <ul>
        <li><a href="#">Tester</a></li>
        <li><a href="#">Motor</a></li>
        <li><a href="#">Teknologi</a></li>
        <li><a href="#">Økonomi</a></li>
        <li><a href="#">Bolig</a></li>
        <li class="has-dropdown">
          <a data-dropdown="drop5">Kalkulatorer</a>
          <ul id="drop5" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a data-dropdown="drop6">Snarveier</a>
          <ul id="drop6" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

11.3 - Page header

.red

Red

.blue

Blue

.green

Green

.yellow

Yellow

.secondary

Secondary

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <h2 class="title {$modifiers}"><a href="#">Something for nothing</a></h2>
  </div>
</header>

11.3.1 - Icon

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <h2 class="title blue">
      <a href="#">
        <svg width="50px" height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" viewBox="0 0 100 100">
            <g>
                <path d="M50,0C22.386,0 0,22.387 0,50C0,77.614 22.386,100 50,100C77.615,100 100,77.614 100,50C100,22.387 77.615,0 50,0Z" style="fill:rgb(86,200,225);fill-rule:nonzero;"/>
                <path d="M97.369,66L2.631,66C9.305,85.764 27.984,100 50,100C72.018,100 90.695,85.764 97.369,66Z" style="fill:rgb(35,172,204);fill-rule:nonzero;"/>
                <path d="M67,39.283L67,30C68.105,30 69,29.104 69,28C69,26.896 68.105,26 67,26L53,26C51.896,26 51,26.896 51,28C51,29.104 51.896,30 53,30L53,39.283C45.412,42.124 40,49.421 40,58C40,69.046 48.955,78 60,78C71.047,78 80,69.046 80,58C80,49.421 74.588,42.124 67,39.283Z" style="fill:white;fill-rule:nonzero;"/>
                <path d="M57,54C65.021,54 74.266,46.663 76.533,54.027C76.92,55.279 77,56.632 77,58C77,67.389 69.389,75 60,75C50.611,75 43,67.389 43,58C43,56.003 43.344,54.087 43.977,52.307C45.514,48.232 49.607,54 57,54Z" style="fill:rgb(214,0,0);fill-rule:nonzero;"/>
                <rect x="53" y="30" width="14" height="1.999" style="fill:rgb(229,229,229);fill-rule:nonzero;"/>
                <path d="M46,26L26,26C24.896,26 24,26.896 24,28C24,29.104 24.896,30 26,30L26,68C26,73.522 30.477,78 36,78C41.523,78 46,73.522 46,68L46,30C47.105,30 48,29.104 48,28C48,26.896 47.105,26 46,26Z" style="fill:white;fill-rule:nonzero;"/>
                <rect x="26" y="30" width="20" height="1.999" style="fill:rgb(229,229,229);fill-rule:nonzero;"/>
                <path d="M38.999,38.999C41.126,38.999 43.001,39.999 43.001,39.999L43.001,67C43.001,70.866 39.867,75 36.001,75C32.135,75 29.001,71.865 29.001,68L29.001,39.999C29.001,39.999 30.814,40.999 32.97,40.999C35.127,40.999 36.917,38.999 38.999,38.999Z" style="fill:rgb(250,175,38);fill-rule:nonzero;"/>
                <path d="M44.375,45.549L44.375,70.465C45.686,72.106 47.244,73.535 49,74.695L49,41.32C47.244,42.479 45.687,43.91 44.375,45.549Z" style="fill:rgb(214,214,214);fill-rule:nonzero;"/>
                <path d="M67,39.283L67,31.999L60,31.999L60,78C71.047,78 80,69.046 80,58C80,49.421 74.588,42.124 67,39.283Z" style="fill:rgb(238,238,238);fill-rule:nonzero;"/>
                <path d="M36,78C41.523,78 46,73.522 46,68L46,31.999L36,31.999Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
                <path d="M36,40.005L36,75C39.866,75 43,70.866 43,67L43,39.999C43,39.999 41.125,38.999 38.998,38.999C37.953,38.999 36.982,39.503 36,40.005Z" style="fill:rgb(229,157,11);fill-rule:nonzero;"/>
                <path d="M34.5,57C35.881,57 37,55.88 37,54.499C37,53.119 35.881,52 34.5,52C33.119,52 32,53.119 32,54.499C32,55.88 33.12,57 34.5,57ZM38.5,49.999C39.328,49.999 40,49.328 40,48.5C40,47.671 39.328,47 38.5,47C37.672,47 37,47.671 37,48.5C37,49.328 37.672,49.999 38.5,49.999ZM38,59.999C36.896,59.999 36,60.895 36,61.999C36,63.104 36.896,64 38,64C39.104,64 40,63.104 40,61.999C40,60.896 39.105,59.999 38,59.999ZM33.5,64.999C32.672,64.999 32,65.671 32,66.499C32,67.327 32.672,68 33.5,68C34.328,68 35,67.327 35,66.499C35,65.671 34.329,64.999 33.5,64.999Z" style="fill:white;fill-opacity:0.298039;fill-rule:nonzero;"/>
                <path d="M60,53.707L60,75C69.389,75 77,67.389 77,58C77,56.632 76.92,55.279 76.533,54.027C74.545,47.568 67.189,52.417 60,53.707Z" style="fill:rgb(181,0,0);fill-rule:nonzero;"/>
                <g>
                    <path d="M54.5,57C52.566,57 51,58.566 51,60.5C51,62.433 52.566,64 54.5,64C56.434,64 58,62.433 58,60.5C58,58.566 56.434,57 54.5,57ZM63,64C61.344,64 60,65.343 60,67C60,68.657 61.344,69.999 63,69.999C64.656,69.999 66,68.657 66,67C66,65.343 64.656,64 63,64ZM64.5,57C63.672,57 63,57.671 63,58.5C63,59.328 63.672,59.999 64.5,59.999C65.328,59.999 66,59.328 66,58.5C66,57.671 65.328,57 64.5,57ZM70,59.999C68.896,59.999 68,60.895 68,61.999C68,63.104 68.896,64 70,64C71.105,64 72,63.104 72,61.999C72,60.896 71.105,59.999 70,59.999ZM71.5,54C70.672,54 70,54.671 70,55.5C70,56.328 70.672,57 71.5,57C72.328,57 73,56.328 73,55.5C73,54.671 72.328,54 71.5,54Z" style="fill:white;fill-opacity:0.298039;fill-rule:nonzero;"/>
                </g>
                <path d="M46,67.634C46.852,68.867 47.861,69.981 49,70.948L49,51.938C47.803,51.407 46.808,50.96 46,50.871Z" style="fill:rgb(181,0,0);fill-rule:nonzero;"/>
            </g>
        </svg>
        Something for nothing
      </a>
    </h2>
  </div>
</header>

11.3.2 - Colors

.red

Red

.blue

Blue

.green

Green

.yellow

Yellow

.secondary

Secondary

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <div class="pageheader {$modifiers}">
    <h2 class="title"><a href="#">Something for nothing</a></h2>
  </div>
</header>

11.3.3 - Breadcrumbs

.red

Red

.blue

Blue

.green

Green

.yellow

Yellow

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <span class="icon-arrow"></span>
    <ul class="{$modifiers}">
      <li><a href="#">Home</a></li>
      <li><a href="#">Section</a></li>
      <li class="unavailable"><a href="#">Page</a></li>
      <li class="current"><a href="#">Level</a></li>
    </ul>
  </div>
</header>

11.3.4 - Todays tip

.red

Red

.blue

Blue

.green

Green

.yellow

Yellow

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/logo/dinside-logo-190.svg" data-pin-nopin="true">
      </a>
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <span class="icon-arrow"></span> <span class="tip-text">Dagens tips: <a href="#"> Tør du se hvor mye du sløser?</a></span>
  </div>
</header>

11.4 - Tabs

Requires javascript

Tab 1
Tab 2
Tab 3
Tab 4

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>

<ul class="tabs expand-3" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
</ul>

11.5 - Pagination

<ul class="pagination">
  <li class="arrow unavailable"><a href="" class="icon-Arrow-alt-left"></a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="" class="icon-Arrow-alt-right"></a></li>
</ul>

11.6 - Side nav

<ul class="side-nav">
  <li class="heading">Section</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#" class="active">Link 5</a></li>
</ul>