<header class="o-header js-header">
<div class="o-header__container l-container@above-viewport-9">
<div class="o-header__left">
<a class="a-logo o-header__logo" href="">
<img class="a-logo__visual" src="/assets/images/brand/logo.svg" alt="cevora" title="cevora" />
</a>
<div class="m-language js-language o-header__settings">
<button class="m-language__active">NL</button>
<ul class="m-language__list">
<li class="m-language__item">
<a class="m-language__link" href="#">NL</a>
</li>
<li class="m-language__item">
<a class="m-language__link" href="#">EN</a>
</li>
<li class="m-language__item">
<a class="m-language__link" href="#">FR</a>
</li>
</ul>
</div>
<nav class="o-nav js-nav o-header__nav">
<ul class="o-nav__list u-hide@below-viewport-9">
<li class="o-nav__item">
<div class="o-nav__flyout o-nav__flyout--align-left">
<a class="o-nav__flyout-trigger" href="#">Opleidingen</a>
<ul class="o-nav__sub ">
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingen per thema</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingen per sector</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingstrajecten</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">De voorwaarden</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingspremies</a>
</li>
</ul>
</div>
</li>
<li class="o-nav__item">
<div class="o-nav__flyout ">
<a class="o-nav__flyout-trigger" href="#">Extra-diensten</a>
<ul class="o-nav__sub ">
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Blog - leren met resultaat</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Ontslagbegeleiding</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Hulp bij aanwerving</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingstoolbox</a>
</li>
</ul>
</div>
</li>
<li class="o-nav__item">
<div class="o-nav__flyout ">
<a class="o-nav__flyout-trigger" href="#">Over Cevora</a>
<ul class="o-nav__sub ">
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Veelgestelde vragen</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Het Cevora-team</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Werken bij Cevora</a>
</li>
</ul>
</div>
</li>
<li class="o-nav__item">
<a class="o-nav__item-link" href="#">Contacteer ons</a>
</li>
</ul>
<div class="o-nav__mobile u-hide@above-viewport-9">
<ul class="o-nav__list">
<li class="o-nav__item">
<div class="o-nav__collapse ">
<div class="o-nav__collapse-header">
<a class="o-nav__collapse-text" href="#">Opleidingen</a>
<button class="o-nav__collapse-trigger"></button>
</div>
<div class="o-nav__collapse-content">
<ul class="o-nav__sub ">
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingen per thema</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingen per sector</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingstrajecten</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">De voorwaarden</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingspremies</a>
</li>
</ul>
</div>
</div>
</li>
<li class="o-nav__item">
<div class="o-nav__collapse ">
<div class="o-nav__collapse-header">
<a class="o-nav__collapse-text" href="#">Extra-diensten</a>
<button class="o-nav__collapse-trigger"></button>
</div>
<div class="o-nav__collapse-content">
<ul class="o-nav__sub ">
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Blog - leren met resultaat</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Ontslagbegeleiding</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Hulp bij aanwerving</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Opleidingstoolbox</a>
</li>
</ul>
</div>
</div>
</li>
<li class="o-nav__item">
<div class="o-nav__collapse ">
<div class="o-nav__collapse-header">
<a class="o-nav__collapse-text" href="#">Over Cevora</a>
<button class="o-nav__collapse-trigger"></button>
</div>
<div class="o-nav__collapse-content">
<ul class="o-nav__sub ">
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Veelgestelde vragen</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Het Cevora-team</a>
</li>
<li class="o-nav__sub-item">
<a class="o-nav__sub-link" href="#">Werken bij Cevora</a>
</li>
</ul>
</div>
</div>
</li>
<li class="o-nav__item">
<a class="o-nav__item-link" href="#">Contacteer ons</a>
</li>
</ul>
<div class="o-nav__register">
<span class="o-nav__register-option">
<a class="a-link " href="">
<span class="a-link__text">Registreer</span>
</a>
of
</span>
<button class="a-button o-nav__register-option ">
<span class="a-button__text">Login</span>
</button>
</div>
</div>
</nav>
</div>
<div class="o-header__right">
<div class="o-basket js-basket o-header__basket">
<div class="o-basket__label">
<div class="a-amount-indicator o-basket__badge">
<span class="a-amount-indicator__icon icon-basket"></span>
<span class="a-badge a-amount-indicator__badge undefined ">
3
</span>
</div>
</div>
<div class="o-basket__container">
<h5 class="o-basket__title">Opleidingen in jouw mandje</h5>
<ul class="m-product-list o-basket__content">
<li class="m-product-list__item">
<div class="a-added-product ">
<a class="a-added-product__link" href="">
History of Magic
</a>
<button class="a-icon-button a-icon-button--animated a-added-product__button ">
<span class="a-icon-button__icon icon-cancel"></span>
</button>
</div>
</li>
<li class="m-product-list__item">
<div class="a-added-product ">
<a class="a-added-product__link" href="">
Defence Against the Dark Arts
</a>
<button class="a-icon-button a-icon-button--animated a-added-product__button ">
<span class="a-icon-button__icon icon-cancel"></span>
</button>
</div>
</li>
<li class="m-product-list__item">
<div class="a-added-product ">
<a class="a-added-product__link" href="">
Transfiguration
</a>
<button class="a-icon-button a-icon-button--animated a-added-product__button ">
<span class="a-icon-button__icon icon-cancel"></span>
</button>
</div>
</li>
</ul>
<div class="o-basket__action">
<button class="a-button u-width-100 ">
<span class="a-button__text">Inschrijven</span>
</button>
</div>
</div>
</div>
<div class="o-header__login u-hide@below-viewport-9">
<a class="a-link o-header__register-link " href="">
<span class="a-link__text">Registreer</span>
</a>
<span class="o-header__login-divider">of</span>
<button class="a-button ">
<span class="a-button__text">Login</span>
</button>
</div>
<button class="a-hamburger js-hamburger o-header__hamburger u-hide@above-viewport-9">
<span class="a-hamburger__container">
<span class="a-hamburger__bar a-hamburger__bar--top"></span>
<span class="a-hamburger__bar a-hamburger__bar--middle"></span>
<span class="a-hamburger__bar a-hamburger__bar--bottom"></span>
<span class="a-hamburger__line a-hamburger__line--top-left"></span>
<span class="a-hamburger__line a-hamburger__line--top-right"></span>
<span class="a-hamburger__line a-hamburger__line--bottom-left"></span>
<span class="a-hamburger__line a-hamburger__line--bottom-right"></span>
</span>
</button>
</div>
</div>
</header>