Header

This is the main header of the page. It is always displayed at the top of the page and is used to navigate between to pages, check the notifications or control the logged in user panel.

Default

px

			
				<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>
			

		

Logged in

px

			
				<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 ">
							<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__logout">
						<a class="a-button a-button--outline" href="">
							<span class="a-button__text">Logout</span>
						</a>
					</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-notifications js-notifications o-header__notifications">
				<div class="o-notifications__label">
					<div class="a-amount-indicator o-notifications__badge">
						<span class="a-amount-indicator__icon icon-alert"></span>
						<span class="a-badge a-amount-indicator__badge undefined ">
							1
						</span>
					</div>
					<span class="o-notifications__label-text">Meldingen</span>
				</div>
				<div class="o-notifications__container">
					<ul class="m-notification-list">
						<li class="m-notification-list__item">
							<article class="m-notification ">
								<p class="m-notification__description">
									Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
								</p>
								<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
								<button class="m-notification__state">
									Markeren als gelezen
								</button>
							</article>
						</li>
						<li class="m-notification-list__item">
							<article class="m-notification is-read">
								<p class="m-notification__description">
									Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
								</p>
								<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
								<button class="m-notification__state">
									Gelezen
								</button>
							</article>
						</li>
						<li class="m-notification-list__item">
							<article class="m-notification is-read">
								<p class="m-notification__description">
									Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
								</p>
								<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
								<button class="m-notification__state">
									Gelezen
								</button>
							</article>
						</li>
						<li class="m-notification-list__item">
							<article class="m-notification is-read">
								<p class="m-notification__description">
									Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
								</p>
								<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
								<button class="m-notification__state">
									Gelezen
								</button>
							</article>
						</li>
					</ul>
					<div class="o-notifications__action">
						<a class="a-button a-button--secondary a-button--outline" href="">
							<span class="a-button__text">Bekijk alle meldingen</span>
						</a>
					</div>
				</div>
			</div>
			<div class="o-user js-user o-header__user">
				<div class="o-user__trigger">
					<div class="o-user__picture">
						<img class="o-user__picture-image" src="/assets/images/user/profile.png" alt="Han Solo" title="Han Solo" />
					</div>
				</div>
				<div class="o-user__content">
					<ul class="o-user__nav">
						<li class="o-user__nav-item">
							<a class="o-user__nav-link" href="#">Opleidingen per thema</a>
						</li>
						<li class="o-user__nav-item">
							<a class="o-user__nav-link" href="#">Opleidingen per sector</a>
						</li>
						<li class="o-user__nav-item">
							<a class="o-user__nav-link" href="#">Opleidingstrajecten</a>
						</li>
						<li class="o-user__nav-item">
							<a class="o-user__nav-link" href="#">De voorwaarden</a>
						</li>
						<li class="o-user__nav-item">
							<a class="o-user__nav-link" href="#">Opleidingspremies</a>
						</li>
					</ul>
					<div class="o-user__footer">
						<div class="o-user__footer-item">
							<div class="a-formfield ">
								<div class="a-formfield__header">
									<label class="a-formfield__label " for="">
										Rol aanpassen
									</label>
								</div>
								<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-after ">
									<select class="a-formfield__select" id="" name="">
										<option value="">Werknemer</option>
										<option value="">Werkgever</option>
									</select>
									<span class="a-formfield__icon-after icon-arrow-down-small"></span>
								</div>
							</div>
						</div>
						<div class="o-user__footer-item">
							<button class="a-button a-button--outline ">
								<span class="a-button__text">logout</span>
							</button>
						</div>
					</div>
				</div>
			</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>
			

		

Minimal

px

			
				<header class="o-header o-header--minimal 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>
		<div class="o-header__right"></div>
	</div>
</header>