<header class='org-header'>
<div id="mol-header-search" class="">
<a id="header-search-close">
<span class="text">Sluiten</span>
<span class="atm-icon far fa-times fa-lg "></span>
</a>
<div class="header-search-input">
<div class="mol-inline-search">
<form action="#" method="get">
<div class="atm-form-input ">
<input class="form-input" type="search" id="input" name="input">
<label class="atm-form-label form-label " for="input">Zoeken</label>
<span class="atm-icon form-input-error-icon far fa-times "></span>
<span class="atm-icon form-input-valid-icon far fa-check "></span>
</div>
<button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
<span class="button-content">
<span class="atm-icon far fa-search fa-lg fa-fw"></span>
</span>
</button>
</form>
</div>
</div>
<div class="header-search-title">
<h1 class="atm-heading ">14 zoekresultaten</h1>
</div>
<div id="header-search-results">
<div class="mol-search-result js--clickable">
<span class="atm-heading h-subtitle">Facility management</span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
<div class="atm-paragraph ">
<p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
</div>
</div>
<div class="mol-search-result js--clickable">
<span class="atm-heading h-subtitle">Facility management</span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
<div class="atm-paragraph ">
<p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
</div>
</div>
<div class="mol-search-result js--clickable">
<span class="atm-heading h-subtitle">Facility management</span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
<div class="atm-paragraph ">
<p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
</div>
</div>
<div class="mol-search-result js--clickable">
<span class="atm-heading h-subtitle">Facility management</span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
<div class="atm-paragraph ">
<p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
</div>
</div>
</div>
<div class="header-search-button">
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Bekijk 14 resultaten</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
<a class='header-logo' href='/' title='Hago'><img src='../../assets/img/logo_westerveld.svg' alt='Hago' /></a>
<div class='hidden md:block'>
<nav class="mol-header-nav">
<ul>
<li class="active">
<input type="checkbox" id="header-nav-checkbox0" class="header-nav-checkbox">
<label for="header-nav-checkbox0" class="header-nav-label">
<span class="text">Opdrachtgevers met extra text</span>
<span class="atm-icon far fa-chevron-down fa-xs "></span>
</label>
<div class="header-nav-sub">
<ul>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Opdrachtgevers met extra text</a>
</li>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Mijn project</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Bouwreizen</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Partners</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Blog</a>
</li>
</ul>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Schoonmaak</a>
</li>
<li class="">
<input type="checkbox" id="header-nav-checkbox2" class="header-nav-checkbox">
<label for="header-nav-checkbox2" class="header-nav-label">
<span class="text">Branches</span>
<span class="atm-icon far fa-chevron-down fa-xs "></span>
</label>
<div class="header-nav-sub">
<ul>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Branches</a>
</li>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Mijn project</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Bouwreizen</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Partners</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Blog</a>
</li>
</ul>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws uit het niets</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
</nav>
</div>
<div class='ml-auto'>
<nav class="mol-header-utils">
<ul>
<li class="utils-desktop">
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Werken bij Hago Zorg</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="utils-desktop">
<a class="mol-search-toggle">
<span class="text">Zoeken</span>
<span class="atm-icon far fa-search "></span>
</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="utils-mobile">
<a id="mol-mobile-toggle">
<span class="open">
<span class="atm-icon far fa-bars fa-fw"></span>
</span>
<span class="close">
<span class="atm-icon far fa-times fa-fw"></span>
</span>
</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="utils-desktop">
<div class='mol-language-select'>
<input type='checkbox' id='lang-select-checkbox' class='lang-select-checkbox' />
<label for='lang-select-checkbox' class='lang-select-label'>
<span class='text'>NL</span>
<span class="atm-icon far fa-chevron-down fa-xs "></span>
</label>
<div class='lang-select-sub'>
<ul>
<li><a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
</li>
<li><a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
</li>
<li><a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
</li>
</ul>
</div>
</div>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
</ul>
</nav>
</div>
</header>
<div class="vebego-container">
<div class='search-block block md:hidden'>
<div class="mol-inline-search">
<form action="#" method="get">
<div class="atm-form-input ">
<input class="form-input" type="search" id="input" name="input">
<label class="atm-form-label form-label " for="input">Verhalen zoeken</label>
<span class="atm-icon form-input-error-icon far fa-times "></span>
<span class="atm-icon form-input-valid-icon far fa-check "></span>
</div>
<button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
<span class="button-content">
<span class="atm-icon far fa-search fa-lg fa-fw"></span>
</span>
</button>
</form>
</div>
</div>
</div>
<div id="mol-mobile-nav" class=" mobile-nav-has-quicklinks">
<div class="mobile-nav-panel mobile-nav-panel-active" id="mobile-nav-panel-root">
<div class='search-block block md:hidden'>
<div class="mol-inline-search">
<form action="#" method="get">
<div class="atm-form-input ">
<input class="form-input" type="search" id="input" name="input">
<label class="atm-form-label form-label " for="input">Verhalen zoeken</label>
<span class="atm-icon form-input-error-icon far fa-times "></span>
<span class="atm-icon form-input-valid-icon far fa-check "></span>
</div>
<button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
<span class="button-content">
<span class="atm-icon far fa-search fa-lg fa-fw"></span>
</span>
</button>
</form>
</div>
</div>
<ul>
<li>
<a class="menu-link active" href="#" title="Impact" data-sub="0">
<span class="text">Impact</span>
<span class="atm-icon far fa-chevron-right "></span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Betekenisvol werk">
<span class="text">Betekenisvol werk</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Diensten en segmenten">
<span class="text">Diensten en segmenten</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Contact">
<span class="text">Contact</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Over Vebego">
<span class="text">Over Vebego</span>
</a>
</li>
</ul>
<div>
<div class='mol-language-mobile-list'>
<div>
<ul>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">English (EN)</a>
</li>
<li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Nederlands (NL)</a>
</li>
<li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Deutsch (DE)</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mobile-nav-panel" id="mobile-nav-panel-0" data-parent="root">
<ul>
<li class="back-button">
<a class="atm-button atm-button-primary button-sm button-light">
<span class="button-content">
<span class="atm-icon fal fa-angle-left "></span>
<span>Terug</span>
</span>
</a>
<span class="label">Impact</span>
</li>
<li>
<a class="menu-link active" href="#" title="Impact">
<span class="text">Impact</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Mijn project">
<span class="text">Mijn project</span>
</a>
</li>
<li>
<a class="menu-link active" href="#" title="Bouwreizen" data-sub="01">
<span class="text">Bouwreizen</span>
<span class="atm-icon far fa-chevron-right "></span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Partners">
<span class="text">Partners</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Blog" data-sub="03">
<span class="text">Blog</span>
<span class="atm-icon far fa-chevron-right "></span>
</a>
</li>
</ul>
</div>
<div class="mobile-nav-panel" id="mobile-nav-panel-01" data-parent="0">
<ul>
<li class="back-button">
<a class="atm-button atm-button-primary button-sm button-light">
<span class="button-content">
<span class="atm-icon fal fa-angle-left "></span>
<span>Terug</span>
</span>
</a>
<span class="label">Bouwreizen</span>
</li>
<li>
<a class="menu-link active" href="#" title="Bouwreizen">
<span class="text">Bouwreizen</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Meld je aan">
<span class="text">Meld je aan</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Planning">
<span class="text">Planning</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Sri Lanka">
<span class="text">Sri Lanka</span>
</a>
</li>
<li>
<a class="menu-link active" href="#" title="Marokko">
<span class="text">Marokko</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Ghana">
<span class="text">Ghana</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Zuid-Afrika">
<span class="text">Zuid-Afrika</span>
</a>
</li>
</ul>
</div>
<div class="mobile-nav-panel" id="mobile-nav-panel-03" data-parent="0">
<ul>
<li class="back-button">
<a class="atm-button atm-button-primary button-sm button-light">
<span class="button-content">
<span class="atm-icon fal fa-angle-left "></span>
<span>Terug</span>
</span>
</a>
<span class="label">Blog</span>
</li>
<li>
<a class="menu-link " href="#" title="Blog">
<span class="text">Blog</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Nieuwste blogs">
<span class="text">Nieuwste blogs</span>
</a>
</li>
<li>
<a class="menu-link " href="#" title="Blog aanmelden">
<span class="text">Blog aanmelden</span>
</a>
</li>
</ul>
</div>
<div class="mobile-nav-quicklinks">
<a href="#">
<span><span class="atm-icon far fa-chevron-right fa-xs "></span>Werken bij Hago</span>
</a>
<a href="#">
<span><span class="atm-icon far fa-chevron-right fa-xs "></span>Inschrijven nieuwsbrief</span>
</a>
</div>
</div>
<header class='org-header'>
{{render '@header-search' headerSearch merge=true}}
<a class='header-logo' href='/' title='{{logoAlt}}'><img
src='{{path logoSrc}}'
alt='{{logoAlt}}'
/></a>
<div class='hidden md:block'>{{render '@header-nav'}}</div>
<div class='ml-auto'>{{render '@header-utils'}}</div>
</header>
<div class="vebego-container">
<div class='search-block block md:hidden'>{{render '@inline-search'}}</div>
</div>
{{render '@mobile-nav' mobileNav merge=true}}
{
"logoSrc": "/assets/img/logo_westerveld.svg",
"logoAlt": "Hago",
"headerSearch": {
"startOpened": false
},
"mobileNav": {
"startOpened": false
}
}
.org-header {
@apply relative flex md:flex-none lg:flex items-center;
@apply mb-0 md:mb-10;
height: 109px;
padding-left: 35px;
@screen md {
height: 180px;
padding-left: 57px;
}
&::before {
@apply absolute block top-0 left-0;
@apply bg-primary;
content: '';
width: 35px;
height: 109px;
clip-path: polygon(0 0, 0% 100%, 100% 0);
@screen md {
width: 57px;
height: 180px;
}
}
.header-logo {
@apply relative block justify-self-start flex-shrink-0;
margin-left: 5px;
@apply md:ml-8;
> img {
@apply w-auto;
height: 45px;
@screen md {
height: 60px;
}
}
}
.mol-header-nav,
.mol-header-utils {
@apply mt-10 md:mt-5;
}
.mol-header-nav {
margin-left: 50px;
margin-right: 50px;
@apply mt-20 lg:mt-10;
}
.mol-header-utils {
@apply absolute xl:static right-0 top-0;
margin-right: 50px;
}
.toggle-wrapper {
@apply flex md:hidden items-center ml-auto mr-4;
margin-top: 27px;
.mol-search-toggle {
}
.atm-slash {
@apply mx-4;
}
.mol-mobile-toggle {
}
}
}
.sector-move .org-header:before {
@apply hidden;
}
.search-block {
@apply mb-4;
}
No notes defined.