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"> <h1 class="title"> <a href="http://www.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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"> <h1 class="title"> <a href="http://www.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.
<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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.
Section name
More<header id="top-navigation" class="top-nav" role="banner"> <div class="primary"> <h1 class="title"> <a href="http://www.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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
Section name
More<header id="top-navigation" class="top-nav" role="banner"> <div class="primary"> <h1 class="title"> <a href="http://www.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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 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.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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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
Dagens tips: Tør du se hvor mye du sløser?
.red
Red
Dagens tips: Tør du se hvor mye du sløser?
.blue
Blue
Dagens tips: Tør du se hvor mye du sløser?
.green
Green
Dagens tips: Tør du se hvor mye du sløser?
.yellow
Yellow
Dagens tips: Tør du se hvor mye du sløser?
<header id="top-navigation" class="top-nav" role="banner"> <div class="primary"> <h1 class="title"> <a href="http://www.sol.no" title="Forsiden"> <img class="logo" src="/assets/styleguide/sol-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
<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>
11.4.1 - Expanded
<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="">…</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>