Back to Global Header-guidelines
Skip to content
CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window
This global header is designed to apply one navigation layout to all main digital customer facing applications within If.
This component provides .css, .styl, .less and .scss -files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/global-header@17.0.30-alpha.0Det oknepiga försäkringsbolaget
Skaffa rätt skydd för ditt hem och dina saker
Table of Contents
Edit this section, Opens in new windowUsage
Open pages
<div class="if app">
<header class="if global-header">
<a href="#content" class="if axe skip-to-content">Skip to content</a>
<nav class="if primary">
<div class="if mobile">
<ul class="if mobile-menu-list">
<li class="if mobile-menu-item logo-holder">
<a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if mobile-menu-item shopping-cart-holder">
<a href="/my-pages.html" class="if mobile-menu-action shopping-cart">Varukorg</a>
</li>
<li class="if mobile-menu-item login-holder">
<button type="button" class="if mobile-menu-action button login">Logga in</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/index-logged-in.html" class="if">Privat</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Företag</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Stora företag</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Mäklare</a></li>
</ul>
</div>
</li>
<li class="if mobile-menu-item mobile-menu-holder">
<button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
<div class="if accordion-menu">
<div class="if mobile-search">
<form class="if">
<input
type="search"
placeholder="Sök If.se"
class="if input-field js-if-mobile-search"
name="if-mobile-search"
/>
<label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
</form>
</div>
<ul class="if">
<li class="if is-parent">
<button type="button" class="if">
Privat
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<a href="/" class="if">Försäkringar</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<a href="/" class="if"><span aria-hidden="true" class="if icon ui house"></span>Hem</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
<li class="if">
<a href="/adasdsad" class="if"
>Försäkring vid studier eller praktik utomlandsförsäkring</a>
</li>
<li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product car"></span>Fordon</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product paw"></span>Djur</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product bag"></span>Resa</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon symbol single-body"></span>Person</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product boat"></span>Boat</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="if"><a href="/" class="if">Skador</a></li>
<li class="if"><a href="/" class="if">Kundservice</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if">Företag</a>
</li>
<li class="if">
<a href="/" class="if">Stora Företag</a>
</li>
</ul>
<div class="if mobile-language">
<ul class="if mobile-language-list">
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="nb">NB</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="da">DA</button>
</li>
<li class="if mobile-language-item is-active">
<button type="button" class="if mobile-language-action" data-language="sv">SV</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="fi">FI</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="en">EN</button>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item">
<button type="button" class="if desktop-menu-action button is-active">Privat</button>
</li>
<li class="if desktop-menu-item">
<button type="button" class="if desktop-menu-action button desktop-menu-action">Företag</button>
</li>
<li class="if desktop-menu-item">
<button type="button" class="if desktop-menu-action button desktop-menu-action">Stora företag</button>
</li>
<li class="if desktop-menu-item change-language-holder is-parent">
<button type="button" class="if desktop-menu-action change-language">SV</button>
<div class="if dropdown-menu top" style="">
<ul class="if">
<li class="if">
<button type="button" class="if" data-language="nb">Norsk bokmål</button>
</li>
<li class="if">
<button type="button" class="if" data-language="da">Dansk</button>
</li>
<li class="if">
<button type="button" class="if" data-language="sv">Svenska</button>
</li>
<li class="if">
<button type="button" class="if" data-language="fi">Suomen kieli</button>
</li>
<li class="if">
<button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
</li>
<li class="if">
<button type="button" class="if" data-language="en">English</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lv">Latviešu valoda</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lt">Lietuvių kalba</button>
</li>
<li class="if">
<button type="button" class="if" data-language="et">Eesti keel</button>
</li>
<li class="if">
<button type="button" class="if" data-language="ru">Pусский язык</button>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item login-holder">
<button type="button" class="if desktop-menu-action button login">Logga in</button>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/index-logged-in.html" class="if">Privat</a></li>
<li class="if"><a href="/my-business.html" class="if">Företag</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Stora företag</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Mäklare</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<nav class="if secondary">
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item logo-holder">
<a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if desktop-menu-item is-parent">
<button type="button" class="if desktop-menu-action">Försäkringar</button>
<div class="if tertiary">
<div class="if container">
<div class="if holder">
<div class="if description">
<strong class="if">Försäkringskategorier</strong> <button
type="button"
class="if toggle-all js-toggle-insurance-sub-categories"
>
Visa alla försäkringar
</button>
</div>
<ul class="if shortcuts">
<li class="if">
<a href="/" class="if shortcut icon ui product symbol house">Hem</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
<li class="if">
<a href="/adasdsad" class="if">Försäkring vid studier eller praktik utomlandsförsäkring</a>
</li>
<li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol vehicles">Fordon</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol paw">Djur</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol bag">Resa</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol single-body">Person</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol boat">Boat</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="if holder">
<div class="if showcase">
<div class="if description">
<strong class="if">Populära försäkringar</strong>
</div>
<ul class="if">
<li class="if"><a class="if" href="/asd">Bilförsäkring</a></li>
<li class="if"><a class="if" href="/asd">Reseförsäkring</a></li>
<li class="if"><a class="if" href="/asd">Gravidförsäkring</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="if desktop-menu-item">
<a href="/my-pages.html" class="if desktop-menu-action">Vid skada</a>
</li>
<li class="if desktop-menu-item">
<a href="/my-pages.html" class="if desktop-menu-action">Kundservice</a>
</li>
</ul>
<ul class="if global-menu-list global">
<li class="if global-menu-item"><a href="/my-pages.html" class="if global-menu-action search">Sök</a></li>
<li class="if global-menu-item shopping-cart-holder">
<a href="/my-pages.html" class="if global-menu-action shopping-cart">Varukorg</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="if main">
<section class="if hero">
<div class="if container">
<div class="if content no-image">
<h1 class="if heading largest">Open pages</h1>
</div>
</div>
</section>
</main>
</div>Logged in
<div class="if app">
<header class="if global-header">
<a href="#content" class="if axe skip-to-content">Skip to content</a>
<nav class="if primary">
<div class="if mobile">
<ul class="if mobile-menu-list">
<li class="if mobile-menu-item logo-holder">
<a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if mobile-menu-item shopping-cart-holder">
<a href="/my-pages.html" class="if mobile-menu-action shopping-cart">Varukorg (2)</a>
</li>
<li class="if mobile-menu-item mypages-holder">
<button type="button" class="if mobile-menu-action button mypages">
Mina sidor<span class="if notice top-right" role="status" aria-live="polite">1</span>
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent right">
<a href="/my-pages.html" class="if"
><span aria-hidden="true" class="if icon symbol parent"></span>Elisabeth</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/my-pages.html" class="if is-active">Elisabeth</a></li>
<li class="if"><a href="/my-pages.html" class="if">Per</a></li>
<li class="if"><a href="/my-pages.html" class="if">Anna</a></li>
</ul>
</div>
</li>
<li class="if is-parent right">
<a href="/my-pages.html" class="if"
><span aria-hidden="true" class="if icon ui cog"></span>Settings</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/my-pages.html" class="if">User settings</a></li>
<li class="if"><a href="/my-pages.html" class="if">Broker settings</a></li>
<li class="if"><a href="/my-pages.html" class="if">Company settings</a></li>
</ul>
</div>
</li>
<li class="if"><a href="/my-pages.html" class="if">My Pages</a></li>
<li class="if"><a href="/my-pages.html" class="if">My Business</a></li>
<li class="if"><a href="/my-pages.html" class="if">Industrial If Login</a></li>
<li class="if"><a href="/my-pages.html" class="if">Employee insurances</a></li>
<li class="if"><a href="/my-pages.html" class="if">Broker</a></li>
<li class="if">
<a href="/my-pages.html" class="if"
><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a>
</li>
</ul>
</div>
</li>
<li class="if mobile-menu-item mobile-menu-holder">
<button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
<div class="if accordion-menu">
<div class="if mobile-search">
<form class="if">
<input
type="search"
placeholder="Sök If.se"
class="if input-field js-if-mobile-search"
name="if-mobile-search"
/>
<label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
</form>
</div>
<ul class="if">
<li class="if is-parent">
<button type="button" class="if">Level 1</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<button type="button" class="if">
<span aria-hidden="true" class="if icon ui house"></span>Level 2
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<button type="button" class="if">Level 3</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/my-pages.html" class="if">Level 4</a></li>
<li class="if"><a href="/my-pages.html" class="if">Level 4</a></li>
<li class="if"><a href="/my-pages.html" class="if">Level 4</a></li>
</ul>
</div>
</li>
<li class="if"><a href="/my-pages.html" class="if">Level 3</a></li>
<li class="if"><a href="/my-pages.html" class="if">Level 3</a></li>
</ul>
</div>
</li>
<li class="if"><a href="/my-pages.html" class="if">Level 2</a></li>
<li class="if"><a href="/my-pages.html" class="if">Level 2</a></li>
</ul>
</div>
</li>
<li class="if"><a href="/my-pages.html" class="if">Level 1</a></li>
<li class="if"><a href="/my-pages.html" class="if">Level 1</a></li>
</ul>
<div class="if mobile-language">
<ul class="if mobile-language-list">
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="nb">NB</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="da">DA</button>
</li>
<li class="if mobile-language-item is-active">
<button type="button" class="if mobile-language-action" data-language="sv">SV</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="fi">FI</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="en">EN</button>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item">
<button type="button" class="if desktop-menu-action button is-active">Privat</button>
</li>
<li class="if desktop-menu-item">
<button type="button" class="if desktop-menu-action button desktop-menu-action">Företag</button>
</li>
<li class="if desktop-menu-item">
<button type="button" class="if desktop-menu-action button desktop-menu-action">Stora företag</button>
</li>
<li class="if desktop-menu-item change-language-holder is-parent">
<button type="button" class="if desktop-menu-action change-language">SV</button>
<div class="if dropdown-menu top" style="">
<ul class="if">
<li class="if">
<button type="button" class="if" data-language="nb">Norsk bokmål</button>
</li>
<li class="if">
<button type="button" class="if" data-language="da">Dansk</button>
</li>
<li class="if">
<button type="button" class="if" data-language="sv">Svenska</button>
</li>
<li class="if">
<button type="button" class="if" data-language="fi">Suomen kieli</button>
</li>
<li class="if">
<button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
</li>
<li class="if">
<button type="button" class="if" data-language="en">English</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lv">Latviešu valoda</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lt">Lietuvių kalba</button>
</li>
<li class="if">
<button type="button" class="if" data-language="et">Eesti keel</button>
</li>
<li class="if">
<button type="button" class="if" data-language="ru">Pусский язык</button>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item mypages-holder is-parent">
<a href="/my-pages.html" class="if desktop-menu-action button mypages">
Mina sidor
</a>
</li>
<li class="if desktop-menu-item logout-holder">
<button class="if desktop-menu-action button logout" type="button">Logga ut</button>
</li>
</ul>
</div>
</nav>
<nav class="if secondary">
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item logo-holder">
<a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if desktop-menu-item is-parent">
<button type="button" class="if desktop-menu-action">Försäkringar</button>
<div class="if tertiary">
<div class="if container">
<div class="if holder">
<div class="if description">
<strong class="if">Försäkringskategorier</strong> <button
type="button"
class="if toggle-all js-toggle-insurance-sub-categories"
>
Visa alla försäkringar
</button>
</div>
<ul class="if shortcuts">
<li class="if">
<a href="/" class="if shortcut icon ui product symbol house">Hem</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
<li class="if">
<a href="/adasdsad" class="if">Försäkring vid studier eller praktik utomlandsförsäkring</a>
</li>
<li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol vehicles">Fordon</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol paw">Djur</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol bag">Resa</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol single-body">Person</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if shortcut icon ui product symbol boat">Boat</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="if holder">
<div class="if showcase">
<div class="if description">
<strong class="if">Populära försäkringar</strong>
</div>
<ul class="if">
<li class="if"><a class="if" href="/asd">Bilförsäkring</a></li>
<li class="if"><a class="if" href="/asd">Reseförsäkring</a></li>
<li class="if"><a class="if" href="/asd">Gravidförsäkring</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="if desktop-menu-item">
<a href="/my-pages.html" class="if desktop-menu-action">Vid skada</a>
</li>
<li class="if desktop-menu-item">
<a href="/my-pages.html" class="if desktop-menu-action">Kundservice</a>
</li>
</ul>
<ul class="if global-menu-list global">
<li class="if global-menu-item"><a href="/my-pages.html" class="if global-menu-action search">Sök</a></li>
<li class="if global-menu-item shopping-cart-holder">
<a href="/my-pages.html" class="if global-menu-action shopping-cart">Varukorg (2)</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="if main">
<section class="if hero">
<div class="if container">
<div class="if content no-image">
<h1 class="if heading largest">Open pages logged in</h1>
</div>
</div>
</section>
</main>
</div>My Pages
<div class="if app">
<header class="if global-header">
<a href="#content" class="if axe skip-to-content">Skip to content</a>
<nav class="if primary">
<div class="if mobile">
<ul class="if mobile-menu-list">
<li class="if mobile-menu-item logo-holder">
<a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if mobile-menu-item shopping-cart-holder">
<a href="/" class="if mobile-menu-action shopping-cart">Varukorg</a>
</li>
<li class="if mobile-menu-item mypages-holder is-active">
<button type="button" class="if mobile-menu-action button mypages">
Mina sidor<span class="if notice top-right" role="status" aria-live="polite">1</span>
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent right">
<a href="/my-pages.html" class="if"
><span aria-hidden="true" class="if icon symbol parent"></span>Elisabeth</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/my-pages.html" class="if is-active">Elisabeth</a></li>
<li class="if"><a href="/my-pages.html" class="if">Per</a></li>
<li class="if"><a href="/my-pages.html" class="if">Anna</a></li>
</ul>
</div>
</li>
<li class="if is-parent right">
<a href="/my-pages.html" class="if"
><span aria-hidden="true" class="if icon ui cog"></span>Settings</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/my-pages.html" class="if">User settings</a></li>
<li class="if"><a href="/my-pages.html" class="if">Broker settings</a></li>
<li class="if"><a href="/my-pages.html" class="if">Company settings</a></li>
</ul>
</div>
</li>
<li class="if"><a href="/my-pages.html" class="if">My Business</a></li>
<li class="if"><a href="/my-pages.html" class="if">Industrial If Login</a></li>
<li class="if"><a href="/my-pages.html" class="if">Employee insurances</a></li>
<li class="if"><a href="/my-pages.html" class="if">Broker</a></li>
<li class="if is-parent is-active">
<a href="/my-pages.html" class="if">My Pages</a>
<div class="if accordion-menu is-open">
<ul class="if is-open">
<li class="if"><a href="/" class="if ">Översikt</a></li>
<li class="if"><a href="/" class="if ">Försäkringar</a></li>
<li class="if"><a href="/" class="if ">Skador</a></li>
<li class="if"><a href="/" class="if ">Betalningar</a></li>
<li class="if"><a href="/" class="if ">Dokument</a></li>
<li class="if">
<a href="/" class="if "
>Meddelanden<span class="if notice inline top" role="status" aria-live="polite">1</span></a>
</li>
<li class="if"><a href="/" class="if ">Inställningar</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/my-pages.html" class="if"
><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a>
</li>
</ul>
</div>
</li>
<li class="if mobile-menu-item mobile-menu-holder">
<button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
<div class="if accordion-menu">
<div class="if mobile-search">
<form class="if">
<input
type="search"
placeholder="Sök If.se"
class="if input-field js-if-mobile-search"
name="if-mobile-search"
/>
<label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
</form>
</div>
<ul class="if">
<li class="if is-parent is-active">
<button type="button" class="if">
Privat
</button>
<div class="if accordion-menu is-open">
<ul class="if accordion-menu is-open">
<li class="if is-parent">
<a href="/" class="if">Försäkringar</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<a href="/" class="if"><span aria-hidden="true" class="if icon ui house"></span>Hem</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
<li class="if">
<a href="/adasdsad" class="if"
>Försäkring vid studier eller praktik utomlandsförsäkring</a>
</li>
<li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product car"></span>Fordon</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product paw"></span>Djur</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product bag"></span>Resa</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon symbol single-body"></span>Person</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product boat"></span>Boat</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="if"><a href="/" class="if">Skador</a></li>
<li class="if"><a href="/" class="if">Kundservice</a></li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if">Företag</a>
</li>
<li class="if">
<a href="/" class="if">Stora Företag</a>
</li>
</ul>
<div class="if mobile-language">
<ul class="if mobile-language-list">
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="nb">NB</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="da">DA</button>
</li>
<li class="if mobile-language-item is-active">
<button type="button" class="if mobile-language-action" data-language="sv">SV</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="fi">FI</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="en">EN</button>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item back-to-home-holder">
<a href="/" class="if desktop-menu-action button back-to-home">Till startsida if.se</a>
</li>
<li class="if desktop-menu-item change-language-holder is-parent">
<button type="button" class="if desktop-menu-action change-language">SV</button>
<div class="if dropdown-menu top" style="">
<ul class="if">
<li class="if">
<button type="button" class="if" data-language="nb">Norsk bokmål</button>
</li>
<li class="if">
<button type="button" class="if" data-language="da">Dansk</button>
</li>
<li class="if">
<button type="button" class="if" data-language="sv">Svenska</button>
</li>
<li class="if">
<button type="button" class="if" data-language="fi">Suomen kieli</button>
</li>
<li class="if">
<button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
</li>
<li class="if">
<button type="button" class="if" data-language="en">English</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lv">Latviešu valoda</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lt">Lietuvių kalba</button>
</li>
<li class="if">
<button type="button" class="if" data-language="et">Eesti keel</button>
</li>
<li class="if">
<button type="button" class="if" data-language="ru">Pусский язык</button>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item mypages-holder is-parent">
<button type="button" class="if desktop-menu-action button mypages">
Mina sidor
</button>
<div class="if dropdown-menu">
<ul class="if">
<li class="if is-parent right">
<a href="/index-logged-in.html" class="if"><span class="if icon symbol parent"></span>Elisabeth</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/index-logged-in.html" class="if is-active">Elisabeth</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Per</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Anna</a></li>
</ul>
</div>
</li>
<li class="if separator"></li>
<li class="if is-parent right">
<a href="/index-logged-in.html" class="if"><span class="if icon ui cog"></span>Settings</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/index-logged-in.html" class="if">User settings</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Broker settings</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Company settings</a></li>
</ul>
</div>
</li>
<li class="if separator"></li>
<li class="if"><a href="/index-logged-in.html" class="if">My Pages</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">My Business</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Industrial If Login</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Employee insurances</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Broker</a></li>
<li class="if separator"></li>
<li class="if">
<a href="/index-logged-in.html" class="if"
><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item logout-holder">
<button class="if desktop-menu-action button logout" type="button">Logga ut</button>
</li>
</ul>
</div>
</nav>
<nav class="if secondary">
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item logo-holder">
<a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Översikt</a></li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Försäkringar</a></li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Skador</a></li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Betalningar</a></li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Dokument</a></li>
<li class="if desktop-menu-item">
<a href="/" class="if desktop-menu-action"
>Meddelanden<span class="if notice inline top" role="status" aria-live="polite">1</span></a>
</li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Inställningar</a></li>
</ul>
</div>
</nav>
</header>
<main class="if main">
<section class="if hero">
<div class="if container">
<div class="if content no-image">
<h1 class="if heading largest">My pages</h1>
</div>
</div>
</section>
</main>
</div>My Business
<div class="if app">
<header class="if global-header">
<a href="#content" class="if axe skip-to-content">Skip to content</a>
<nav class="if primary">
<div class="if mobile">
<ul class="if mobile-menu-list">
<li class="if mobile-menu-item logo-holder">
<a href="/" class="if mobile-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if mobile-menu-item shopping-cart-holder">
<a href="/" class="if mobile-menu-action shopping-cart">Varukorg</a>
</li>
<li class="if mobile-menu-item mypages-holder">
<button type="button" class="if mobile-menu-action button mypages mybusiness">
My Business<span class="if notice top-right" role="status" aria-live="polite">1</span>
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent right">
<a href="/index-logged-in.html" class="if"
><span class="if icon symbol parent"></span>
Elisabeth
</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if">
<a href="/index-logged-in.html" class="if is-active">
Elisabeth
</a>
</li>
<li class="if">
<a href="/index-logged-in.html" class="if">
Per
</a>
</li>
<li class="if">
<a href="/index-logged-in.html" class="if">
Anna
</a>
</li>
</ul>
</div>
</li>
<li class="if is-parent">
<button type="button" class="if">
<span aria-hidden="true" class="if icon product company"></span>
Graver AS
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if">
<button type="button" class="if">
Webhallen AB
</button>
</li>
<li class="if">
<button type="button" class="if">
Korv & Ost AB
</button>
</li>
<li class="if">
<button type="button" class="if">
Kostcirkeln AB
</button>
</li>
<li class="if">
<button type="button" class="if">
Inet AB
</button>
</li>
<li class="if">
<button type="button" class="if is-active">
Graver AS
</button>
</li>
<li class="if">
<a href="/" class="if">
<span aria-hidden="true" class="if icon ui list"></span>
Visa alla företag
</a>
</li>
</ul>
</div>
</li>
<li class="if is-parent right">
<a href="/index-logged-in.html" class="if"
><span class="if icon ui cog"></span>
Settings
</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if">
<a href="/index-logged-in.html" class="if is-active">
User settings
</a>
</li>
<li class="if">
<a href="/index-logged-in.html" class="if">
Broker settings
</a>
</li>
<li class="if">
<a href="/index-logged-in.html" class="if">
Company settings
</a>
</li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if">
Översikt
</a>
</li>
<li class="if is-parent">
<a href="/" class="if">
Försäkringar
</a>
</li>
<li class="if">
<a href="/" class="if">
Pension
</a>
</li>
<li class="if">
<a href="/" class="if">
Inställningar
</a>
</li>
<li class="if">
<a href="/index-logged-in.html" class="if"
><span aria-hidden="true" class="if icon ui log-out"></span>
Logga ut
</a>
</li>
</ul>
</div>
</li>
<li class="if mobile-menu-item mobile-menu-holder">
<button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
<div class="if accordion-menu">
<div class="if mobile-search">
<form class="if">
<input
type="search"
placeholder="Sök If.se"
class="if input-field js-if-mobile-search"
name="if-mobile-search"
/>
<label for="if-mobile-search" class="if"><span class="if axe sr-only">Search If</span></label>
</form>
</div>
<ul class="if">
<li class="if is-parent">
<button type="button" class="if">
Privat
</button>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<a href="/" class="if">Försäkringar</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if is-parent">
<a href="/" class="if"><span aria-hidden="true" class="if icon ui house"></span>Hem</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Villaförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hyresrättförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Bostadsrättförsäkring</a></li>
<li class="if">
<a href="/adasdsad" class="if"
>Försäkring vid studier eller praktik utomlandsförsäkring</a>
</li>
<li class="if"><a href="/adasdsad" class="if">Fritidshusförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product car"></span>Fordon</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Bilförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">MC-försäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Mopedförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Husbildsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Släpvagnsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler...</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product paw"></span>Djur</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Hundförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Kattförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Hästförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product bag"></span>Resa</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Reseförsäkring</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon symbol single-body"></span>Person</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Personförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Barnförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Gravidförsäkringar</a></li>
<li class="if"><a href="/adasdsad" class="if">Livförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Olycksfallsförsäkring</a></li>
<li class="if"><a href="/adasdsad" class="if">Visa fler..</a></li>
</ul>
</div>
</li>
<li class="if is-parent">
<a href="/" class="if"
><span aria-hidden="true" class="if icon product boat"></span>Boat</a>
<div class="if accordion-menu">
<ul class="if">
<li class="if"><a href="/adasdsad" class="if">Båtförsäkring</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="if"><a href="/" class="if">Skador</a></li>
<li class="if"><a href="/" class="if">Kundservice</a></li>
</ul>
</div>
</li>
<li class="if is-parent is-active">
<a href="/" class="if">Företag</a>
<div class="if accordion-menu is-open">
<ul class="if is-open">
<li class="if">
<a href="/" class="if">Företagsförsäkring</a>
</li>
<li class="if">
<a href="/" class="if">Vid skade</a>
</li>
<li class="if">
<a href="/" class="if">Kundservice</a>
</li>
</ul>
</div>
</li>
<li class="if">
<a href="/" class="if">Stora Företag</a>
</li>
</ul>
<div class="if mobile-language">
<ul class="if mobile-language-list">
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="nb">NB</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="da">DA</button>
</li>
<li class="if mobile-language-item is-active">
<button type="button" class="if mobile-language-action" data-language="sv">SV</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="fi">FI</button>
</li>
<li class="if mobile-language-item">
<button type="button" class="if mobile-language-action" data-language="en">EN</button>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item back-to-home-holder">
<a href="/" class="if desktop-menu-action button back-to-home">Till startsida if.se</a>
</li>
<li class="if desktop-menu-item change-language-holder is-parent">
<button type="button" class="if desktop-menu-action change-language">SV</button>
<div class="if dropdown-menu top" style="">
<ul class="if">
<li class="if">
<button type="button" class="if" data-language="nb">Norsk bokmål</button>
</li>
<li class="if">
<button type="button" class="if" data-language="da">Dansk</button>
</li>
<li class="if">
<button type="button" class="if" data-language="sv">Svenska</button>
</li>
<li class="if">
<button type="button" class="if" data-language="fi">Suomen kieli</button>
</li>
<li class="if">
<button type="button" class="if" data-language="kl">Kalaallit oqaasii</button>
</li>
<li class="if">
<button type="button" class="if" data-language="en">English</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lv">Latviešu valoda</button>
</li>
<li class="if">
<button type="button" class="if" data-language="lt">Lietuvių kalba</button>
</li>
<li class="if">
<button type="button" class="if" data-language="et">Eesti keel</button>
</li>
<li class="if">
<button type="button" class="if" data-language="ru">Pусский язык</button>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item mypages-holder is-parent">
<button type="button" class="if desktop-menu-action button mypages">
My Business
</button>
<div class="if dropdown-menu">
<ul class="if">
<li class="if is-parent right">
<a href="/index-logged-in.html" class="if"><span class="if icon symbol parent"></span>Elisabeth</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/index-logged-in.html" class="if is-active">Elisabeth</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Per</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Anna</a></li>
</ul>
</div>
</li>
<li class="if separator"></li>
<li class="if is-parent right">
<a href="/index-logged-in.html" class="if"><span class="if icon ui cog"></span>Settings</a>
<div class="if dropdown-menu">
<ul class="if">
<li class="if"><a href="/index-logged-in.html" class="if">User settings</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Broker settings</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Company settings</a></li>
</ul>
</div>
</li>
<li class="if separator"></li>
<li class="if"><a href="/index-logged-in.html" class="if">My Pages</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">My Business</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Industrial If Login</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Employee insurances</a></li>
<li class="if"><a href="/index-logged-in.html" class="if">Broker</a></li>
<li class="if separator"></li>
<li class="if">
<a href="/index-logged-in.html" class="if"
><span aria-hidden="true" class="if icon ui log-out"></span>Logga ut</a>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item company-holder is-parent">
<button type="button" class="if desktop-menu-action button company">
Graver AS
</button>
<div class="if dropdown-menu top" style="">
<ul class="if">
<li class="if">
<button type="button" class="if">Webhallen AB</button>
</li>
<li class="if">
<button type="button" class="if">Korv & Ost AB</button>
</li>
<li class="if">
<button type="button" class="if">Kostcirkeln AB</button>
</li>
<li class="if">
<button type="button" class="if">Inet AB</button>
</li>
<li class="if">
<button type="button" class="if is-active">Graver AS</button>
</li>
<li class="if separator"></li>
<li data-anatomy="outline left" class="if">
<a href="/" class="if"><span aria-hidden="true" class="if icon ui list"></span>Visa alla företag </a>
</li>
</ul>
</div>
</li>
<li class="if desktop-menu-item logout-holder">
<button class="if desktop-menu-action button logout" type="button">Logga ut</button>
</li>
</ul>
</div>
</nav>
<nav class="if secondary">
<div class="if desktop container">
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item logo-holder">
<a href="/" class="if desktop-menu-action logo small"><span class="if axe sr-only">Home</span></a>
</li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action is-active">Översikt</a></li>
<li class="if desktop-menu-item is-parent">
<a href="/" class="if desktop-menu-action">Försäkringar</a>
</li>
<li class="if desktop-menu-item"><a href="/" class="if desktop-menu-action">Pension</a></li>
<li class="if desktop-menu-item is-parent">
<a href="/" class="if desktop-menu-action">Inställningar</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="if main">
<section class="if hero">
<div class="if container">
<div class="if content no-image">
<h1 class="if heading largest">My Business</h1>
</div>
</div>
</section>
</main>
</div>Single login option
If you have the situation where the login button only have one option, use the .single class on the .login-holder.
- An arrow is present instead of a dropdown
…
<li class="if desktop-menu-item login-holder single" data-anatomy="outline bottom">
<a href="/asdsadsa" class="if desktop-menu-action button login">Logga in</a>
</li>
…Search
See the Search Field component and the Autocomplete component for more implementation documentation.
Desktop
<div class="if app">
<header class="if global-header">
…
<nav class="if secondary">
<div class="if desktop container">
<div class="if desktop-search">
<form class="if">
<div class="if search-field large" role="search">
<input
type="search"
placeholder="Sök If.se"
class="if input-field js-if-desktop-search"
name="q"
id="q"
/>
<button type="button" class="if close" title="Close search">
<span class="if axe sr-only">Close search</span>
</button>
</div>
</form>
…
</div>
</div>
…
</nav>
</header>
<main class="if main">
…
</main>
<div class="if backdrop is-open"></div>
</div>Mobile
<div class="if app">
<header class="if global-header">
<nav class="if secondary">
…
<ul …>
<li class="if mobile-menu-item mobile-menu-holder">
<button type="button" class="if mobile-menu-action button mobile-menu">Meny</button>
<div class="if accordion-menu">
<div class="if mobile-search">
<form class="if">
<div class="if search-field">
<input data-anatomy="outline bottom" type="search" placeholder="Sök If.se" class="if input-field js-if-mobile-search" name="if-mobile-search"/>
<button type="button" class="if reset" aria-label="Clear search"></button>
</div>
</form>
</div>
</div>
</li>
…
</ul>
…
</nav>
</header>
<main class="if main">
…
</main>
<div class="if backdrop is-open"></div>
</div>Quick links
The quick links appear when the search field is focused. A separate flag,
.is-activeshould be added to the container
.if.quick-links-holder<div class="if tertiary is-open">
<div class="if container">
<div class="if quick-links-holder is-active">
<p class="if text meta">Snabblenkär</p>
<ul class="if quick-links">
<li class="if"><a href="/" class="if">Buy insurance</a></li>
<li class="if"><a href="/" class="if">Buy insurance</a></li>
<li class="if"><a href="/" class="if">Buy insurance</a></li>
<li class="if"><a href="/" class="if">Buy insurance</a></li>
<li class="if"><a href="/" class="if">Buy insurance</a></li>
<li class="if"><a href="/" class="if">Buy insurance</a></li>
</ul>
</div>
</div>
</div>Co-branding
Mobile
<ul class="if mobile-menu-list">
<li class="if mobile-menu-item logo-holder">
<a href="/" class="if mobile-menu-action">
<span class="if logo small"><span class="if axe sr-only">Home</span></span>
</a>
</li>
<li class="if mobile-menu-item co-brand-holder">
<a href="/" class="if mobile-menu-action">
<img
class="if co-brand"
src="https://if-design-cdn.azureedge.net/images/documentation/global-header/co-branding/cobrand-nordea.png"
/>
</a>
</li>
…
</ul>If the co-brand logo is really wide, for example containing text, you can use the .text-modifier to increase the height of the container to get a better presentation of the logo:
<li class="if mobile-menu-item co-brand-holder text">
<a href="/" class="if mobile-menu-action">
<img
class="if co-brand"
src="https://if-design-cdn.azureedge.net/images/documentation/global-header/co-branding/cobrand-nordea.png"
/>
</a>
</li>Desktop
<ul class="if desktop-menu-list">
<li class="if desktop-menu-item logo-holder">
<a href="/" class="if desktop-menu-action">
<span class="if logo small"><span class="if axe sr-only">Home</span></span>
</a>
</li>
<li class="if desktop-menu-item co-brand-holder">
<a href="/" class="if desktop-menu-action ">
<img
class="if co-brand"
src="https://if-design-cdn.azureedge.net/images/documentation/global-header/co-branding/cobrand-nordea.png"
/>
<span class="if axe sr-only">Unionen</span>
</a>
</li>
…
</ul>Without If-logo
If you want to hide the if logo, just remove the markup:
Mobile
2,6d1
- <li class="if mobile-menu-item logo-holder">
- <a href="/" class="if mobile-menu-action">
- <span class="if logo small"><span class="if axe sr-only">Home</span></span>
- </a>
- </li>
<li class="if mobile-menu-item co-brand-holder">
<a href="/" class="if mobile-menu-action">
<img
class="if co-brand"
src="https://if-design-cdn.azureedge.net/images/documentation/global-header/co-branding/cobrand-nordea.png"
/>
</a>
</li>Desktop
2,6d1
- <li class="if desktop-menu-item logo-holder">
- <a href="/" class="if desktop-menu-action">
- <span class="if logo small"><span class="if axe sr-only">Home</span></span>
- </a>
- </li>
<li class="if desktop-menu-item co-brand-holder">
<a href="/" class="if desktop-menu-action ">
<img
class="if co-brand"
src="https://if-design-cdn.azureedge.net/images/documentation/global-header/co-branding/cobrand-nordea.png"
/>
<span class="if axe sr-only">Unionen</span>
</a>
</li>Sticky navigation
<div class="if app">
<header class="if global-header is-fixed">
....
</header>
</div>let c;
let currentScrollTop = 0;
const navbar = document.querySelector('.if.global-header.is-fixed');
window.addEventListener('scroll', () => {
window.requestAnimationFrame(() => {
var a = document.querySelector('html').scrollTop;
var b = navbar.getBoundingClientRect().height;
currentScrollTop = a;
if (a === 0) {
navbar.classList.remove('has-scrolled');
navbar.classList.remove('has-scrolled-down');
} else {
navbar.classList.add('has-scrolled');
if (c < currentScrollTop && a > b + b) {
navbar.classList.add('has-scrolled-down');
} else if (c > currentScrollTop && !(a <= b)) {
setTimeout(() => {
navbar.classList.remove('has-scrolled-down');
}, 100);
}
}
c = currentScrollTop;
});
});JavaScript implementation example
var openMenu = function(action) {
if (!action) return;
var parent = action.parentElement;
if (!parent) return;
var menu = parent.querySelector('.if[class*="menu"]:not(button)');
var list = parent.querySelector('.if[class*="menu"]:not(button) > ul.if');
action.setAttribute('aria-expanded', true);
parent.classList.add('is-open');
if (menu) {
menu.classList.add('is-open');
}
if (list) {
list.classList.add('is-open');
}
};
var closeMenu = function(action) {
if (!action) return;
var parent = action.parentElement;
if (!parent) return;
var menu = parent.querySelector('.if[class*="menu"]:not(button)');
var list = parent.querySelector('.if[class*="menu"]:not(button) > ul.if');
action.setAttribute('aria-expanded', false);
parent.classList.remove('is-open');
if (menu) {
menu.classList.remove('is-open');
}
if (list) {
list.classList.remove('is-open');
}
};
var toggleMenu = function(action) {
if (!action) return;
var parent = action.parentElement;
if (!parent) return;
if (parent.classList.contains('is-open')) {
closeMenu(action);
} else {
openMenu(action);
}
};
var globalHeaders = document.querySelectorAll('.if.global-header');
Array.prototype.slice.call(globalHeaders).forEach(function(header) {
var headerMenuParents = header.querySelectorAll(
'.if.secondary .if.desktop-menu-list > li.is-parent > .if.desktop-menu-action'
);
var toggleInsuranceSubCategories = header.querySelector('.js-toggle-insurance-sub-categories');
var loginButtons = header.querySelectorAll('.if.login');
var changeLanguageButtons = header.querySelectorAll('.if.change-language');
var mobileMenuButtons = header.querySelectorAll('.if.mobile-menu');
var myPagesMenuButtons = header.querySelectorAll('.if.mypages');
var companyMenuButtons = header.querySelectorAll('.if.company');
Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
button.addEventListener('click', function(e) {
toggleMenu(button);
Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(loginButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(companyMenuButtons).forEach(function(button) {
closeMenu(button);
});
});
});
Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
button.addEventListener('click', function(e) {
toggleMenu(button);
Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(loginButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(companyMenuButtons).forEach(function(button) {
closeMenu(button);
});
});
});
Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
button.addEventListener('click', function(e) {
toggleMenu(button);
});
Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(loginButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(companyMenuButtons).forEach(function(button) {
closeMenu(button);
});
});
Array.prototype.slice.call(loginButtons).forEach(function(button) {
button.addEventListener('click', function(e) {
toggleMenu(button);
Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(companyMenuButtons).forEach(function(button) {
closeMenu(button);
});
});
});
Array.prototype.slice.call(companyMenuButtons).forEach(function(button) {
button.addEventListener('click', function(e) {
toggleMenu(button);
Array.prototype.slice.call(myPagesMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(mobileMenuButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(changeLanguageButtons).forEach(function(button) {
closeMenu(button);
});
Array.prototype.slice.call(loginButtons).forEach(function(button) {
closeMenu(button);
});
});
});
if (toggleInsuranceSubCategories) {
toggleInsuranceSubCategories.addEventListener('click', function(e) {
var insuranceCrosslinks = header.querySelector('.if.shortcuts');
if (!insuranceCrosslinks) {
return;
}
var insuranceSubMenus = insuranceCrosslinks.querySelectorAll('.if[class*="menu"]:not(button)');
if (insuranceCrosslinks.classList.contains('is-open')) {
toggleInsuranceSubCategories.textContent = 'Visa alla försäkringar';
insuranceCrosslinks.classList.remove('is-open');
} else {
insuranceCrosslinks.classList.add('is-open');
toggleInsuranceSubCategories.textContent = 'Visa färre';
}
Array.prototype.slice.call(insuranceSubMenus).forEach(function(subMenu) {
subMenu.classList.toggle('is-open');
});
setTimeout(function() {
fixTertiarySize();
}, 200);
});
}
Array.prototype.slice.call(headerMenuParents).forEach(function(menuButton) {
menuButton.addEventListener('click', function(e) {
var parentElement = menuButton.parentElement;
var subMenu = parentElement.querySelector('.tertiary');
if (parentElement.classList.contains('is-open')) {
menuButton.setAttribute('aria-expanded', false);
parentElement.classList.remove('is-open');
subMenu.classList.remove('is-open');
} else {
menuButton.setAttribute('aria-expanded', true);
parentElement.classList.add('is-open');
subMenu.classList.add('is-open');
}
});
});
});
var forLastExec,
delay = 100, // delay between calls
throttled = false, // are we currently throttled?
calls = 0;
var fixTertiarySize = function() {
var globalHeaderSubMenus = document.querySelectorAll('.if.global-header .tertiary');
Array.prototype.slice.call(globalHeaderSubMenus).forEach(function(subMenu) {
subMenu.style.width = document.body.clientWidth + 'px';
});
};
// window.resize event listener
window.addEventListener('resize', function() {
// only run if we're not throttled
if (!throttled) {
// actual callback action
fixTertiarySize();
// we're throttled!
throttled = true;
// set a timeout to un-throttle
setTimeout(function() {
throttled = false;
}, delay);
}
clearTimeout(forLastExec);
forLastExec = setTimeout(fixTertiarySize, delay);
});
fixTertiarySize();
var accordionMenus = document.querySelectorAll('.if.accordion-menu, .if.desktop-menu-action + .if.accordion-menu');
Array.prototype.slice.call(accordionMenus).forEach(function(menu) {
var expandableMenuActions = menu.querySelectorAll('li.is-parent > a, li.is-parent > button');
Array.prototype.slice.call(expandableMenuActions).forEach(function(action) {
action.addEventListener('click', function(e) {
e.preventDefault();
if (action.parentElement.classList.contains('is-active')) {
action.parentElement.classList.remove('is-active');
var expandedMenuItems = action.parentElement.querySelectorAll('li.is-parent.is-active');
Array.prototype.slice.call(expandedMenuItems).forEach(function(item) {
item.classList.remove('is-active');
});
var expandedSubMenus = action.parentElement.querySelectorAll('.is-open');
Array.prototype.slice.call(expandedSubMenus).forEach(function(menu) {
menu.classList.remove('is-open');
});
} else {
action.parentElement.classList.add('is-active');
action.parentElement.querySelector('.if.accordion-menu').classList.add('is-open');
action.parentElement.querySelector('.if.accordion-menu > ul').classList.add('is-open');
}
});
});
});
document.querySelector('.company-selector').addEventListener('click', e => {
toggleMenu(e.target);
});Accessibility
When implementing the Global Header component, it is crucial to use the correct aria- and role-attributes.
- Use
role="menu"on menu containers. - Use
role="menuitem"on menu items, i.e. buttons and links. - Use
aria-setsizeon menu items, to indicate how large the menu is. - Use
aria-posinsetto indicate which position in the set the menu item is. - Use
aria-expandedon menu items that are expandable/have a menu. - Use
aria-labelledby/aria-labelon sub menus. - Use
role="presentation"onliandulelements, since they are no longer lists, but part of the menu.
<button
type="button"
id="mobile-menu-open-pages-index-01-submenu-private-submenu-person"
role="menuitem"
aria-setsize="6"
aria-haspopup="true"
aria-expanded="false"
aria-posinset="5"
class="if"
>
<span aria-hidden="true" class="if icon symbol single-body"></span>Person
</button>
<div
class="if accordion-menu"
role="menu"
aria-labelledby="mobile-menu-open-pages-index-01-submenu-private-submenu-person"
>
<ul class="if" role="presentation">
<li role="presentation" class="if">
<a role="menuitem" aria-setsize="6" aria-posinset="1" href="/adasdsad" class="if">Personförsäkringar</a>
</li>
<li role="presentation" class="if">
<a role="menuitem" aria-setsize="6" aria-posinset="2" href="/adasdsad" class="if">Barnförsäkringar</a>
</li>
</ul>
</div>Resources
- Navigation Menubar Example
- Accessible Mega Menu example
- Web Content Accessibility Guidelines (WCAG) 2.1
- Grouping related links using the nav element
Tokens
Global Header tokens
| Name | Value | Is aliased in |
|---|---|---|
$ids-global-header-co-brand-link-spacing-inset-media-query-base |
0 0.5rem |
|
$ids-global-header-co-brand-link-spacing-inset-media-query-sm |
0 1rem |
|
$ids-global-header-co-brand-spacing-inline-media-query-sm |
0 0.5rem |
|
$ids-global-header-co-brand-size-height-mobile |
1.25rem |
|
$ids-global-header-co-brand-size-height-desktop-media-query-base |
1.25rem |
|
$ids-global-header-co-brand-size-height-desktop-media-query-sm |
2.5rem |
|
$ids-global-header-co-brand-size-height-text-mobile |
2.5rem |
|
$ids-global-header-co-brand-size-height-text-desktop |
2.5rem |
|
$ids-global-header-co-brand-size-width |
8.75rem |
|
$ids-global-header-description-spacing-stack |
1.5rem |
|
$ids-global-header-description-size-text |
1rem |
|
$ids-global-header-primary-desktop-menu-item-spacing-margin |
0 |
|
$ids-global-header-primary-desktop-menu-list-spacing-margin |
0 |
|
$ids-global-header-primary-desktop-menu-list-spacing-padding |
0 |
|
$ids-global-header-primary-desktop-menu-list-size-width |
100% |
|
$ids-global-header-primary-desktop-menu-list-size-min-height |
3rem |
|
$ids-global-header-primary-desktop-menu-list-size-height |
initial |
|
$ids-global-header-primary-desktop-menu-list-list-style |
none inside none |
|
$ids-global-header-primary-desktop-menu-list-justify-content |
flex-start |
|
$ids-global-header-primary-desktop-menu-list-align-items |
center |
|
$ids-global-header-primary-size-height-media-query-base |
100% |
|
$ids-global-header-primary-size-height-media-query-xs |
auto |
|
$ids-global-header-primary-size-width-media-query-base |
100% |
|
$ids-global-header-primary-size-width-media-query-xs |
100% |
|
$ids-global-header-primary-color-background-media-query-base |
rgb(250,249,247) |
|
$ids-global-header-primary-color-background-media-query-xs |
rgb(241,236,232) |
|
$ids-global-header-secondary-desktop-menu-item-spacing-min-width |
0 |
|
$ids-global-header-secondary-desktop-menu-list-spacing-margin |
0 |
|
$ids-global-header-secondary-desktop-menu-list-spacing-padding |
0 |
|
$ids-global-header-secondary-desktop-menu-list-size-width |
100% |
|
$ids-global-header-secondary-desktop-menu-list-size-min-height |
3rem |
|
$ids-global-header-secondary-desktop-menu-list-size-height |
6.25rem |
|
$ids-global-header-secondary-desktop-menu-list-list-style |
none inside none |
|
$ids-global-header-secondary-desktop-menu-list-justify-content |
flex-start |
|
$ids-global-header-secondary-desktop-menu-list-align-items |
center |
|
$ids-global-header-secondary-global-menu-list-display |
flex |
|
$ids-global-header-secondary-global-menu-list-align-items |
center |
|
$ids-global-header-secondary-global-menu-list-size-height |
6.25rem |
|
$ids-global-header-secondary-global-menu-list-spacing-margin |
0 0 0 auto |
|
$ids-global-header-secondary-global-menu-list-list-style |
none inside none |
|
$ids-global-header-secondary-color-background |
rgb(250,249,247) |
|
$ids-global-header-secondary-size-height |
6.25rem |
|
$ids-global-header-size-height |
4rem |
|
$ids-global-header-depth-z-index |
400 |
|
$ids-global-header-global-menu-action-color-text-open |
rgb(51,30,17) |
|
$ids-global-header-global-menu-action-size-text |
1rem |
|
$ids-global-header-global-menu-action-size-line-height |
1.25rem |
|
$ids-global-header-global-menu-action-size-weight |
78 |
|
$ids-global-header-global-menu-action-size-height |
3rem |
|
$ids-global-header-global-menu-action-spacing-inset |
0 1rem 0 2.5rem |
|
$ids-global-header-global-menu-action-spacing-inline |
0.5rem |
|
$ids-global-header-home-spacing-inset |
0 1rem 0 1.5rem |
|
$ids-global-header-home-color-text |
rgb(0,84,240) |
|
$ids-global-header-logo-holder-spacing-inset-mobile |
0.5rem |
|
$ids-global-header-logo-holder-spacing-inset-desktop |
0.5rem |
|
$ids-global-header-logo-holder-size-width-mobile |
2.5rem |
|
$ids-global-header-logo-holder-size-width-desktop |
4.5rem |
|
$ids-global-header-logo-color-text |
rgb(0,84,240) |
|
$ids-global-header-logo-size-media-query-base |
2.5rem |
|
$ids-global-header-logo-size-media-query-sm |
3.25rem |
|
$ids-global-header-menu-action-color-border-mobile-mypages-default |
rgb(246,243,240) |
|
$ids-global-header-menu-action-color-background-active |
rgb(250,249,247) |
|
$ids-global-header-menu-action-color-background-mobile-mypages-default |
rgb(246,243,240) |
|
$ids-global-header-menu-action-color-background-desktop-login-default |
rgb(0,84,240) |
|
$ids-global-header-menu-action-color-background-desktop-login-hover |
rgb(0, 64, 128) |
|
$ids-global-header-menu-action-color-text-open |
rgb(51,30,17) |
|
$ids-global-header-menu-action-color-text-default |
rgb(51,30,17) |
|
$ids-global-header-menu-action-color-text-desktop-login-default |
rgb(250,249,247) |
|
$ids-global-header-menu-action-color-text-desktop-login-hover |
rgb(250,249,247) |
|
$ids-global-header-menu-action-color-text-mobile-login-open |
rgb(0,84,240) |
|
$ids-global-header-menu-action-size-text |
1rem |
|
$ids-global-header-menu-action-size-line-height |
1.25rem |
|
$ids-global-header-menu-action-size-weight |
78 |
|
$ids-global-header-menu-action-size-height |
3rem |
|
$ids-global-header-menu-action-spacing-inset |
0 1rem 0 2.5rem |
|
$ids-global-header-menu-action-spacing-inline |
0.5rem |
|
$ids-global-header-mobile-language-item-color-background-active |
rgb(51,30,17) |
|
$ids-global-header-mobile-language-size-height |
2rem |
|
$ids-global-header-mobile-language-spacing-inset |
1.5rem |
|
$ids-global-header-mobile-menu-holder-size-width |
4.5rem |
|
$ids-global-header-mobile-menu-holder-color-background-open |
rgb(246,243,240) |
|
$ids-global-header-accordion-menu-color-background-accordion |
rgb(246,243,240) |
|
$ids-global-header-mobile-menu-item-size-width |
5.5rem |
|
$ids-global-header-mobile-menu-item-color-text-open |
rgb(0,84,240) |
|
$ids-global-header-mobile-menu-item-color-border-open |
rgb(246,243,240) |
|
$ids-global-header-mobile-spacing-inline-media-query-base |
1.5rem |
|
$ids-global-header-mobile-spacing-inline-media-query-xs |
2rem |
|
$ids-global-header-mobile-spacing-inline-media-query-smlr |
2.5rem |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.27.2 (2022-08-12)
Bug Fixes
- 🐛 Temporary fix for test failing because of hex color case (ca04174)
14.22.2 (2022-05-03)
Miscellaneous chores
14.20.1 (2022-04-19)
Features
Bug Fixes
Code Refactoring
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commitsat 100%
14.9.0 (2022-03-03)
Bug Fixes
-
🐛 Fix global header docs (5542235) . ✅ Closes: 561725
-
🐛 Primary menu item fixes (0a67455) . ✅ Closes: 559077, 561725
-
🐛 Use correct variables and hex code instead of rgb (60bc0a3)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.4 (2022-02-24)
Bug Fixes
- 🐛 Company menu item in primary header (389a10a) . ✅ Closes: 559075
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
14.7.1 (2022-02-18)
Bug Fixes
-
Use correct name (bce2a03)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
14.2.7 (2022-01-18)
Bug Fixes
-
🐛 Use correct background position for dropdown icon (03e9bad)
-
🐛 Use correct filename for utils.css (9641bc6)
-
🐛 Use correct scope for renaming (1e547b2)
-
Use correct name for utils (8eb9dd0)
Code Refactoring
- 💡 Move company selector to primary level (16810e6)
Documentation Updates
- ✏️ Update documentation (65eb49d)
Miscellaneous chores
-
🤖 Fix preprocessor files (d0e561a)
Linting (5b79f26)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
-
Add correct focus styling for mobile menu action buttons (aad7faa)
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
14.0.3 (2021-11-14)
Bug Fixes
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
⚠ BREAKING CHANGES
- 🧨 The scope for If Design System npm packages has now changed from
@if-design-systemto@ids-core. We have also renamed the repository fromif-design-systemtoids-core - 🧨 Util is now renamed to Utils
- 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
- 🧨 Navigation structure has now changed. Please see release notes!
Bug Fixes
-
🐛 In toggling "is active"-> "is open", added hot relaod (46e616a) . ✅ Closes: 491462
-
merge issues (232772b)
Documentation Updates
-
✏️ Adjust documentation (8e77c36)
-
✏️ Make variations tables more condensed (4344a3a)
-
✏️ Move position of the quick links (5cb0897)
-
✏️ Separate out Implementation/CSS for Global Header (38de743) , closes #467386
-
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
💡 Reduce spacing tokens, use correct size tokens (97aa461)
-
💡 Rename scope and repository (3ea5423)
-
💡 Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- 🎸 Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
-
🐛 Complete the pseudo-element fix (1dcee2c)
-
🐛 Use double colon notation for pseudo selectors (b78629b) . ✅ Closes: 478948
13.7.0 (2021-09-22)
Documentation Updates
- ✏️ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.1 (2021-09-15)
Bug Fixes
-
🐛 Fix focus ring issue in global header (e478bd2) , closes #457417
-
🐛 Fix overflow scroll scrollbar issue (2c886ba) , closes #468299
Code Refactoring
13.6.0 (2021-09-08)
Documentation Updates
- Use default shortcut listing for demo links (a746602)
13.3.2 (2021-09-02)
Bug Fixes
-
🐛 Global header shortcuts now fully supports columns (91af88b) , closes #464400 . of one, two and three, with class flags
-
🐛 Remove width on shortcut elements to support columns (e0b2e01) , closes #464400
-
🤖 Use node v14 (4009973)
bootstrap (d23e139)
-
starting to fix issue (c8c9a80)
-
Update demo and dev files (f1aa77c)
-
🤖 Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.13.0 (2021-08-11)
Bug Fixes
12.12.1 (2021-08-10)
Bug Fixes
-
🐛 Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912
-
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
🤖 Reinstall (e660696)
12.7.6 (2021-06-01)
Bug Fixes
12.7.3 (2021-06-01)
Bug Fixes
-
🐛 Fix login button on hover in global header (24bda7e) , closes #419588
-
🤖 Update preprocessor files for global header (d198785)
-
🤖 Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
12.0.0 (2021-05-05)
⚠ BREAKING CHANGES
- 🧨 All of the mixins have now been renamed
- 🧨 Notification is now renamed to Alert Banner
- 🧨 The Accordion Menu is now a separate component
- 🧨 Footer is now renamed to Global Footer
- 🧨 Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts
Bug Fixes
Code Refactoring
-
💡 Extract Accordion Menu as a separate component (11b1974) , closes #336508
-
💡 Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508
-
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508
Miscellaneous chores
-
🤖 Convert typography tokens from theo to SD (e48f255)
-
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
-
🤖 Finalize breakpoint token conversion (f50ea0d)
-
🤖 Make sure all components are named with capital first (08e9a26)
-
🤖 Reinstall (2c763ea)
-
🤖 Reinstall (69e1a5b)
-
🤖 Update all design token references (c640d15)
-
🤖 Update all example references to old menu (81205ad)
-
🤖 Update references to new menus (c5d1065)
-
🤖 Update references to util variables (b79ec36)
-
🤖 Update to correct deps (aca8e20)
-
🤖 Updating links (70f166e)
-
🤖 Use size token for common form height until unique tok (3efceab) . en is created
rebuild (7edb430)
11.0.0 (2021-03-15)
⚠ BREAKING CHANGES
- 🧨 The miniaml header variant of the global-header component has been removed from the documentation. There is no code changes, only documentation changes. Please use the component Minimal header instead.
Documentation Updates
-
✏️ Remove minimal header from documentation (9b50805) , closes #322149
-
Reinstall packages (3922c31)
-
update versions (f679926)
-
🤖 Remove "actin-as" from examples (9b2df85)
-
🤖 Update references and remove "act-as" in demo and dev (7bc288d) , closes #322252
-
🤖 Rename Change Log to Changelog (d412e63)
-
🤖 Remove all references to sketch (35fc554) , closes #339203
-
🤖 Update package fields (200c0af)
10.0.0 (2021-02-15)
⚠ BREAKING CHANGES
- 🧨 form-group is now renamed to input-wrapper, a more logical name
- 🧨 The code markup for logo and co-branded logo is changed. Please read the documentation
Features
- 🎸 Make co-branded logo and logo separate elements (1297575) , closes #327856 #307259 . so they can link to different URLs. Also document support for removal of If logo.
Bug Fixes
Documentation Updates
- ✏️ Add some pointers about search field focus in the global header component (3f91733) , closes #326756
Code Refactoring
-
💡 Rename form-group to input-wrapper (7ee3bae)
-
🤖 Started to update documentation with new search compon (ffcd2f8) . ent
-
🤖 Starting to fix issue (5f6ad5e)
-
🤖 Update preprocessor files to support new search field (d3aa262) . component in global header
-
reinstall packages (fcfacf4)
9.1.0 (2021-01-24)
Bug Fixes
- 🐛 Add missing link to cobrand header demo (054515f)
9.0.3 (2021-01-21)
Miscellaneous chores
8.2.1 (2021-01-13)
Bug Fixes
8.1.6 (2021-01-11)
Bug Fixes
- 🐛 Mobile language item v-alignment (0105543) , closes #322456 . Fix vertical alignment of span/a elements inside mobile language item
8.1.5 (2021-01-11)
Bug Fixes
- 🐛 Globe icon visibility (e637520) , closes #322456 . Globe icon should be visible when first mobile language item is selected
8.0.0 (2020-12-14)
Code Refactoring
- 💡 Replace old block board with new Split Component (49ca4a3)
7.10.0 (2020-12-07)
Features
7.9.0 (2020-12-02)
Bug Fixes
-
🐛 Amend js poc example, update documentation (556361a) , closes #317621
-
🐛 Fix language name overflow in mobile menu (c558225) , closes #317630
-
🐛 Only use single login option icon on desktop (9396abb)
-
🤖 Use a more distint class name for doc crosslink links (2694867)
7.3.0 (2020-11-16)
Features
7.1.2 (2020-11-16)
Bug Fixes
7.1.0 (2020-11-16)
Features
6.43.3 (2020-11-03)
Bug Fixes
Miscellaneous chores
6.40.0 (2020-10-19)
Features
reinstall (2f82469)
reinstall (2cefe15)
6.36.1 (2020-10-13)
Bug Fixes
- 🐛 Add @if-design-system/menu as peerDep to global-header (4f7d2f5) . Lerna automatically adds it as a dep
6.36.0 (2020-10-12)
Miscellaneous chores
- 🤖 Add what-input to demo and dev files (56801b7)
6.35.3 (2020-10-10)
Documentation Updates
- ✏️ Wrap blockquotes in demo and dev files with container (98b6fe5)
6.29.3 (2020-09-07)
Documentation Updates
- ✏️ Merge atoms/molecules/organisms into components (90ed590)
6.26.13 (2020-08-03)
Bug Fixes
- 🐛 Fix chrome bug for menu items getting too large (f085a60)
6.26.12 (2020-08-03)
Documentation Updates
- ✏️ Update documentation for the new registry (3e7ba20)
Miscellaneous chores
-
🤖 lerna bootstrap (d835ec9)
-
🤖 Temporarily remove package-lock.json-files (87b3f7f)
-
🤖 Update references to new scope (b5575dd)
6.26.10 (2020-07-14)
Miscellaneous chores
-
🤖 Manually update some links (ecc0133)
-
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)
6.25.3 (2020-07-09)
Bug Fixes
- 🐛 Use correct icon placement, and correct bg for comp. sel (197b177)
Documentation Updates
6.25.0 (2020-07-07)
Documentation Updates
- ✏️ Use domain links for assets (59ace1c)
6.24.0 (2020-07-06)
Features
- 🎸 Add search to global header, some fixes and docs (65379bb)
6.23.1 (2020-07-02)
Documentation Updates
- ✏️ Fix documentatione examples for global header (708693a)
6.23.0 (2020-07-01)
Features
-
🎸 Add baseline global header for desktop and mobile (008bee8)
-
🎸 Add global header component (265bc68)
Bug Fixes
- 🐛 Fix z-index issue for menu usage in header (c20b2a6)
Documentation Updates
-
✏️ Add documentation pages for different navigations (1339f6d)
-
✏️ Add more documentation regarding open pages header (c299da4)
Miscellaneous chores
-
🤖 Adapt to new documentation backend (343c8ac)
-
🤖 Add secondary dev file for navigation examples (9e4bfa8)
-
🤖 Adjust dev files for header (ea187f4)
-
🤖 Continue to work on new global hero (db2e933)
-
🤖 Continue to work on the global header component (466dc36)
-
🤖 Continue work on global-header (b687598)
-
🤖 Remove packages not approved for VID (2ef74aa)
-
lerna bootstrap (5aa5021)
reinstall (1ab1527)
5.0.0 (2019-09-11)
Miscellaneous chores
bootstrap (323a639)
4.2.0 (2019-07-08)
Features
- 🎸 Add new font styles (1c3e3b7)
3.2.11 (2019-08-07)
Miscellaneous chores
- 🤖 Remove packages not approved for VID (2ef74aa)
5.0.0 (2019-09-11)
Miscellaneous chores
bootstrap (323a639)
4.2.0 (2019-07-08)
Features
- 🎸 Add new font styles (1c3e3b7)
3.2.11 (2019-08-07)
Miscellaneous chores
- 🤖 Remove packages not approved for VID (2ef74aa)
5.0.0 (2019-09-11)
Miscellaneous chores
bootstrap (323a639)
4.2.0 (2019-07-08)
Features
- 🎸 Add new font styles (1c3e3b7)
5.0.0 (2019-09-11)
Miscellaneous chores
bootstrap (323a639)
4.2.0 (2019-07-08)
Features
- 🎸 Add new font styles (1c3e3b7)
4.2.0 (2019-07-08)
Features
- 🎸 Add new font styles (1c3e3b7)
Miscellaneous chores
- 🤖 Update deps (2e84691)
3.1.6 (2019-04-12)
Documentation Updates
- ✏️ Clarify usage of npm token, and change name to gb (224fe32)
3.0.0 (2019-01-15)
⚠ BREAKING CHANGES
- Class syntax has completely changed.
Features
- 🎸 Scoping down guybrush (33e0d71)
Miscellaneous chores
- 🤖 Cleanup and finalized scoping (9324126)
2.7.2 (2018-11-21)
Bug Fixes
- 🐛 Remove all references to verb (2397d6b)
2.6.2 (2018-11-19)
Miscellaneous chores
- 🤖 Remove references to guybrush in documentation, for nw (002e662)
2.6.1 (2018-11-19)
Documentation Updates
- ✏️ Remove @guybrush-prefix from instal notes (c8d373e)
2.4.7 (2018-10-28)
Documentation Updates
- ✏️ Adjust global header documentation (74c4cb5)
2.4.6 (2018-10-26)
Documentation Updates
- ✏️ Update documentation to reflect sandboxed examples (c16884f)
2.4.4 (2018-10-25)
Code Refactoring
- 💡 Refactor styleguide, new theme (c202302)
1.18.2 (2018-09-19)
Bug Fixes
- 🐛 Don't clean dist before we produce javascript files (02ebb76) . The build task in gulp cleaned the dist directory right after we produced the javascript files, resulting in no *.js files in the dist folder
Miscellaneous chores
- 🤖 Make gulp run more silent (56e050e)
1.18.1 (2018-09-17)
Miscellaneous chores
1.18.0 (2018-09-17)
Miscellaneous chores
- release: :bookmark: publish v1.18.0 (aa3271d)
1.17.1 (2018-09-18)
Miscellaneous chores
- release: :bookmark: publish v1.17.1 (2d8219c)
1.18.1 (2018-09-17)
Miscellaneous chores
1.18.0 (2018-09-17)
Miscellaneous chores
- release: :bookmark: publish v1.18.0 (aa3271d)
1.17.0 (2018-09-10)
Miscellaneous chores
1.15.0 (2018-09-07)
Miscellaneous chores
- release: :bookmark: publish v1.15.0 (31be150)
1.14.0 (2018-09-06)
Features
- 🎸 Add support for login and search buttons (778479c)
Miscellaneous chores
1.13.0 (2018-09-04)
Features
- 🎸 Add speccer for specs (3edaa3e)
Code Refactoring
- 💡 Ease footprint of modules (70fe5c9)
Miscellaneous chores
- release: :bookmark: publish v1.13.0 (b99e16d)
1.12.2 (2018-08-23)
Bug Fixes
- 🐛 Fix header adjustment, again (4444b53)
Miscellaneous chores
- release: :bookmark: publish v1.12.2 (9bddcb7)
1.12.1 (2018-08-23)
Bug Fixes
-
🐛 Don't error out when trying to adjust global-header (0b7cbe8)
-
🐛 Use correct number of commits (15dc55e)
Miscellaneous chores
-
🤖 Some refactoring, added version to bundle, package def (e4ee4a8) . to stylus files, updated prism and templates
-
release: :bookmark: publish v1.12.1 (189057f)
1.12.0 (2018-08-22)
Features
Bug Fixes
- 🐛 Use correct color on visited links (055d7d9)
Miscellaneous chores
- release: :bookmark: publish v1.12.0 (7c44ddc)
1.11.0 (2018-08-21)
Miscellaneous chores
1.10.38 (2018-08-20)
Miscellaneous chores
- release: :bookmark: publish v1.10.38 (7d59fc9)
1.10.37 (2018-08-20)
Bug Fixes
- 🐛 Use correct check for subnavigation (db0ff12)
Miscellaneous chores
- release: :bookmark: publish v1.10.37 (fc1ffb2)
1.10.36 (2018-08-20)
Bug Fixes
- 🐛 Only adjust submenus when we have submenus (817f5fe)
Miscellaneous chores
- release: :bookmark: publish v1.10.36 (5585b4d)
1.10.35 (2018-08-20)
Miscellaneous chores
- release: :bookmark: publish v1.10.35 (719ac06)
1.10.34 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.34 (3af5229)
1.10.33 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.33 (adec027)
1.10.32 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.32 (994e8a8)
1.10.31 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.31 (7a31e83)
1.10.30 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.30 (2fbaba0)
1.10.29 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.29 (d9cdb30)
1.10.28 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.28 (70864a5)
1.10.27 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.27 (4ff395c)
1.10.26 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.26 (30d9bbc)
1.10.25 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.25 (a77f3e4)
1.10.24 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.24 (ff3fe91)
1.10.23 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.23 (a1df933)
1.10.22 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.22 (04a1fbc)
1.10.21 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.21 (94e201d)
1.10.20 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.20 (25c40aa)
1.10.19 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.19 (607b524)
1.10.18 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.18 (ef6b333)
1.10.17 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.17 (5e54e21)
1.10.16 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.16 (479e563)
1.10.15 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.15 (508bffb)
1.10.14 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.14 (585912a)
1.10.13 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.13 (9fc1d4b)
1.10.12 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.12 (e638d67)
1.10.11 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.11 (e329aea)
1.10.10 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.10 (b594d1e)
1.10.9 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.9 (6f68c59)
1.10.8 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.8 (1b7ef57)
1.10.7 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.7 (95bc695)
1.10.6 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.6 (ad7cbab)
1.10.5 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.5 (a7efeed)
1.10.4 (2018-08-17)
Miscellaneous chores
- release: :bookmark: publish v1.10.4 (4f08bfa)
1.10.3 (2018-08-17)
Documentation Updates
- ✏️ Update onboarding documentation (505ae9b)
Miscellaneous chores
- release: :bookmark: publish v1.10.3 (7ca1bcf)
1.10.2 (2018-08-16)
Miscellaneous chores
- release: :bookmark: publish v1.10.2 (781968c)
1.10.1 (2018-08-16)
Miscellaneous chores
- release: :bookmark: publish v1.10.1 (aee140f)
1.10.0 (2018-08-16)
Miscellaneous chores
1.9.1 (2018-08-16)
Miscellaneous chores
- release: :bookmark: publish v1.9.1 (0516f24)
1.9.0 (2018-08-15)
Miscellaneous chores
- release: :bookmark: publish v1.9.0 (9718b47)
1.8.0 (2018-08-14)
Miscellaneous chores
- release: :bookmark: publish v1.8.0 (35ff480)
1.7.0 (2018-08-13)
Miscellaneous chores
- release: :bookmark: publish v1.7.0 (6e2690f)
1.6.2 (2018-08-13)
Bug Fixes
-
🐛 Fix global header positioning when using multiple navs (42f366f)
-
global-header: Adjust all menus, and set correct height (5f64586)
-
global-header: only adjust top with 100% (0440d66)
-
global-header: remove spacing, add better top position (d4ae91b)
-
global-header: remove spacing, add better top position (7e9e50d)
-
global-header: run adjust on load (49d4789)
-
global-header: set height for all nav lists (fd19d79)
-
global-header: use correct rgb color for the arrow (ab155bc)
-
global-header: use correct variables (8a42e91)
Code Refactoring
- 💡 only run clean when explicitly calling build (7bf3d25) . because the components are also building js files that got cleaned.
Miscellaneous chores
testing (3ebcfec)