Navigasjon
Midtstilte faner
En midtstilt variant av tab-listen som finnes i bootstrap.
{{ (!showcode1) ? "Vis" : "Skjul" }} kode
<ul class="nav nav-tabs nav-centered">
<li role="presentation" class="active"><a href="#">Hjem</a></li>
<li role="presentation"><a href="#">Profil</a></li>
<li role="presentation"><a href="#">Meldinger</a></li>
</ul>
Topplinje/-meny
Topplinje med tilbakeknapp, logo og inn-/utloggingsknapper.
{{ (!showcode2) ? "Vis" : "Skjul" }} kode
<div class="menu">
<div class="menu-container row">
<div class="hidden-xs col-sm-4 back">
<a href="/"><span>Tilbake</span></a>
</div>
<div class="col-sm-4 menu-logo text-center">
<a href="/">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="100" height="44.8" viewBox="0 0 100 44.8"><style>.st0{fill:#4D4D4F;}</style><path class="st0" d="M11.4 21.5l-2-5.3-5.5-2c-.8-.3-1.4-1.1-1.4-2 0-.9.6-1.7 1.4-2l5.5-2 2-5.3c.3-.8 1.1-1.4 2-1.4.9 0 1.7.5 2 1.4l2 5.3 5.7 2.1c.8.3 1.2 1.1 1.2 1.9 0 .7-.3 1.3-.9 1.7l-.2-.5-8.1-3-1.8-4.8-1.8 4.8-4.9 1.8s4.7 1.7 4.9 1.8c.1.2 1.8 4.8 1.8 4.8l1.4-3.8 2.7 1-2.1 5.6c-.3.8-1.1 1.4-2 1.4-.8-.1-1.6-.7-1.9-1.5"></path><path class="st0" d="M26.6 2.9l2 5.3 5.5 2c.8.3 1.4 1.1 1.4 2 0 .9-.6 1.7-1.4 2l-5.5 2-2 5.3c-.3.8-1.1 1.4-2 1.4s-1.7-.5-2-1.4l-2-5.3-5.7-2.1c-.8-.3-1.2-1.1-1.2-1.9 0-.7.3-1.3.9-1.7l.2.5 8.1 3 1.8 4.8 1.8-4.8 4.9-1.8s-4.7-1.7-4.9-1.8c-.1-.2-1.8-4.8-1.8-4.8l-1.4 3.8-2.7-1 2.1-5.6c.3-.8 1.1-1.4 2-1.4s1.6.7 1.9 1.5M46.9 22.1c-1.6-.6-2.8-.9-4.5-.9-4.6 0-7.7 3.2-7.7 8.1 0 4.4 1.8 7.7 7.4 7.7h4.8V22.1m4.8 18.8H41.5c-7.2 0-11.7-4.7-11.7-12.3 0-6.8 5-11.6 12-11.6 1.6 0 3.1.3 5 .9V8.3h4.8v32.6zM80.2 37H85c5.5 0 7.4-3.3 7.4-7.7 0-4.9-3.1-8.1-7.7-8.1-1.6 0-2.8.3-4.5.9V37M75.4 8.3h4.8V18c1.9-.7 3.4-.9 5-.9 7 0 12 4.9 12 11.6 0 7.5-4.5 12.3-11.7 12.3H75.4V8.3zM71 23c-2.8-1.8-5.4-2.5-7.2-2.5-2 0-3.3.9-3.3 2.2.1 3.1 11.5 5.6 11.7 11.7.1 4.3-3.5 7.2-8.2 7.2-3.1 0-5.4-.6-8.7-2.2v-5.2c3.2 2.2 6.2 3.2 8.2 3.2 2-.1 3.7-1 3.7-2.8 0-3.4-11.7-5.1-11.7-11.7 0-4.1 3.2-6.6 8.2-6.6 2.3 0 4.7.7 7.3 2V23"></path></svg>
</a>
</div>
<nav class="col-sm-4 text-right">
<a href="#">Silje S. Panic</a>
<a href="#">Logg ut</a>
</nav>
</div>
</div>
Panel
Navigasjons-/interaksjonselement til bruk på sider der man har mye informasjon å vise og vil gi brukeren muligheten til å klikke på overskriften for å vise innholdet i panelet.
Panel {{ id }}
Litt innhold som ligger i panelet
<div>
<div class="panel" ng-class="{ 'panel-open': showPanel[id] }" ng-repeat="id in [0, 1]">
<div class="header" ng-click="showPanel[id] = !showPanel[id]">
<h3>Panel {{ id }}</h3>
</div>
<div class="content">
<p>Litt innhold som ligger i panelet</p>
</div>
</div>
</div>