<div class="tpl-search-page">
<div class="vebego-container">
<section class="org-search-header">
<div class="vebego-container">
<span class="atm-heading h5">15 zoekresultaten voor</span>
<h1 class="atm-heading ">"facilitair advies"</h1>
<div class="wrap-search">
<div class="center">
<form action="#" method="get">
<span class="atm-icon far fa-search fa-md "></span>
<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-lg " type="submit">
<span class="button-content">
<span>Zoeken</span>
</span>
<span class="button-triangle"></span>
</button>
</form>
</div>
</div>
</div>
</section>
<div class="search-page-content">
<div class="left">
<h5 class="atm-heading ">Filters</h5>
<div class="wrapper-filters">
<ul>
<li><a class="atm-nav-link active" href="#" title="Nav link" aria-label="" target="">Toon alles</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Content</a>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="wrapper-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 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="atm-pager">
<ul>
<li>
<a href="#">
<span class="atm-icon far fa-chevron-left "></span>
</a>
</li>
<li>
<a class="" href="#">
1
</a>
</li>
<li>
<a class="" href="#">
2
</a>
</li>
<li>
<a class="active" href="#">
3
</a>
</li>
<li>
<a class="" href="#">
4
</a>
</li>
<li>
<a class="" href="#">
5
</a>
</li>
<li>
<a class="" href="#">
6
</a>
</li>
<li>
<a href="#">
<span class="atm-icon far fa-chevron-right "></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tpl-search-page">
<div class="vebego-container">
{{ render '@search-header'}}
<div class="search-page-content">
<div class="left">
{{ render '@heading--h5' heading merge=true}}
<div class="wrapper-filters">
<ul>
{{#each filter}}
<li>{{ render '@nav-link' link merge=true}}</li>
{{/each}}
</ul>
</div>
</div>
<div class="right">
<div class="wrapper-search-results">
{{#each result}}
{{ render '@search-result' result }}
{{/each}}
</div>
{{ render '@pager' }}
</div>
</div>
</div>
</div>
{
"heading": {
"text": "Filters"
},
"filter": [
{
"link": {
"modifier": "active",
"text": "Toon alles"
}
},
{
"link": {
"text": "Nieuws"
}
},
{
"link": {
"text": "Blog"
}
},
{
"link": {
"text": "Vacatures"
}
},
{
"link": {
"text": "Content"
}
}
],
"result": [
{},
{},
{},
{},
{},
{}
]
}
.tpl-search-page {
.search-page-content {
@apply grid;
@apply grid-cols-1;
@apply lg:gap-8;
@apply lg:grid-cols-12;
@apply mt-8;
@apply lg:mt-14;
@apply mb-20;
.left {
@apply lg:col-span-3;
@apply mb-8;
@apply pb-8;
@apply border-b;
@apply border-solid;
@apply border-shade;
@apply lg:border-none;
.wrapper-filters {
@apply mb-4;
li {
@apply mb-3;
}
.atm-nav-link {
@apply font-normal;
&.active,
&:hover {
@apply text-cta;
@apply font-semibold;
}
}
}
}
.right {
@apply col-span-12;
@apply lg:col-span-9;
.wrapper-search-results {
.mol-search-result {
@apply mb-6;
}
}
.atm-pager {
@apply mt-10;
}
}
}
}
No notes defined.