Back to Global Header-guidelines
Skip to content
CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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.8Det 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="<