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.

There are two types of header: when the user is either logged in or off.

Default


			
				<header class="c-header js-header ">
	<div class="c-header__overlay"></div>
	<div class="c-header__container l-container">
		<div class="c-header__actions">
			<a class="c-logo c-header__logo c-header__logo--white" href="#">
				<img class="c-logo__visual" src="/assets/images/general/brand/logo-white.svg" alt="brand logo white" title="brand logo white" role="img">
			</a>
			<a class="c-logo c-header__logo c-header__logo--pink" href="#">
				<img class="c-logo__visual" src="/assets/images/general/brand/logo.svg" alt="brand logo" title="brand logo" role="img">
			</a>
		</div>
		<div class="c-header__content">
			<div class="c-topnav c-header__topnav u-show@desktop">
				<ul class="c-topnav__list">
					<li class="c-topnav__item">
						<a class="c-topnav__item-link" href="#">
							Voor adviseurs
						</a>
					</li>
					<li class="c-topnav__item">
						<a class="c-topnav__item-link" href="#">
							Blog
						</a>
					</li>
					<li class="c-topnav__item">
						<a class="c-topnav__item-link" href="#">
							Klantenservice
						</a>
					</li>
				</ul>
			</div>
			<div class="c-header__nav-container">
				<ul class="c-nav c-header__nav">
					<li class="c-nav__item">
						<a class="c-nav__link" href="#">Hypotheken</a>
					</li>
					<li class="c-nav__item">
						<a class="c-nav__link" href="#">Rentes</a>
					</li>
					<li class="c-nav__item">
						<a class="c-nav__link" href="#">Verduurzamen</a>
					</li>
					<li class="c-nav__item">
						<a class="c-nav__link" href="#">Wie is lot?</a>
					</li>
				</ul>
				<div class="c-topnav c-header__topnav--white u-hide@desktop">
					<ul class="c-topnav__list">
						<li class="c-topnav__item">
							<a class="c-topnav__item-link" href="#">
								Voor adviseurs
							</a>
						</li>
						<li class="c-topnav__item">
							<a class="c-topnav__item-link" href="#">
								Blog
							</a>
						</li>
						<li class="c-topnav__item">
							<a class="c-topnav__item-link" href="#">
								Klantenservice
							</a>
						</li>
					</ul>
				</div>
				<button class="c-button c-header__button ">
					<span class="c-button__text">inloggen</span>
				</button>
			</div>
		</div>
		<button class="c-hamburger c-header__hamburger u-hide@desktop">
			<div class="c-hamburger__bar c-hamburger__bar--top"></div>
			<div class="c-hamburger__bar c-hamburger__bar--middle"></div>
			<div class="c-hamburger__bar c-hamburger__bar--bottom"></div>
			<div class="c-hamburger__line c-hamburger__line--top-left"></div>
			<div class="c-hamburger__line c-hamburger__line--top-right"></div>
			<div class="c-hamburger__line c-hamburger__line--bottom-left"></div>
			<div class="c-hamburger__line c-hamburger__line--bottom-right"></div>
		</button>
	</div>
</header>
			

		

Documentation

Modifiers

  • c-header__logo--white

    Necessary to show the white logo when the header is open on mobile and tablet and to hide it again when it's closed.

  • c-header__logo--pink

    Necessary to show the pink logo when the header is closed on mobile and tablet and to hide it again when it's open.

  • c-header__topnav--white

    Necessary to show the topnavigation on tablet and mobile and hide it on desktop because of the entirely different styling than the main topnav.

States

  • is-open

    This indicates that the mobile and tablet navigation in the header is open. It will animate an overlay and the navigation items accordingly.