<div class='tpl-vacancy-overview'>
<div class='vebego-container'>
<div class='vacancy-intro'>
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div class='vacancy-overview-list'>
<div class='left'>
<div class='modal'>
<div class='go-back'>
<div class='go-back-inner'>
<div><span class="atm-icon chevron-left fal fa-chevron-left fa-xs "></span> Terug naar vacatures</div>
<span class="atm-icon icon-times fal fa-times fa-lg "></span>
</div>
</div>
<div class='modal-inner'>
<div class='check-postcode'>
<h5 class="atm-heading ">Filter</h5>
<div class="atm-form-select ">
<select class="form-select" id="select" name="select">
<option value="1" selected>Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>
</div>
<div class="atm-form-select ">
<select class="form-select" id="select" name="select">
<option value="1" selected>Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>
</div>
<div class="atm-form-input">
<input id="" name="" class="form-input" value="Voer een postcode in">
<label class="atm-form-label form-label" for="headersearch">Voor een postcode in</label>
<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"></span>
</span>
</button>
</div>
</div>
<div class='wrapper-checkbox'>
<h5 class="atm-heading ">Filter</h5>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class='read-more'>Toon meer <span class='atm-icon far fa-chevron-down fa-xs'></span></div>
<div class='read-less hide'>Toon minder <span class='atm-icon far fa-chevron-up fa-xs'></span></div>
</div>
<div class='wrapper-checkbox'>
<h5 class="atm-heading ">Filter</h5>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class='read-more'>Toon meer <span class='atm-icon far fa-chevron-down fa-xs'></span></div>
<div class='read-less hide'>Toon minder <span class='atm-icon far fa-chevron-up fa-xs'></span></div>
</div>
<div class='wrapper-checkbox'>
<h5 class="atm-heading ">Filter</h5>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class='read-more'>Toon meer <span class='atm-icon far fa-chevron-down fa-xs'></span></div>
<div class='read-less hide'>Toon minder <span class='atm-icon far fa-chevron-up fa-xs'></span></div>
</div>
</div>
</div>
<div class='mobile-filter-btn'><span class="atm-icon sliders-h far fa-sliders-h fa-xs "></span> Filter vacatures</div>
</div>
<div class='right'>
<div class='vacancy-results'>
<h4 class="atm-heading ">30 resultaten</h4>
<div><a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Verwijder filters</span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
<div class='vacancy-list-wrapper'>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
<section class="org-vacancy-block js--clickable">
<div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>
<div class="mol-specs-list">
<ul>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Locatie
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Aantal uren
</li>
<li>
<span class="atm-icon fas fa-circle fa-xs "></span>
Salaris
</li>
</ul>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<span class="atm-icon far fa-chevron-right "></span>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
</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 class="back-to-top">
<a href="">
<span class="atm-icon far fa-arrow-up "></span>
</a>
</div>
</div>
<div class='tpl-vacancy-overview'>
<div class='vebego-container'>
<div class='vacancy-intro'>
{{render '@heading'}}
{{render '@paragraph'}}
</div>
<div class='vacancy-overview-list'>
<div class='left'>
<div class='modal'>
<div class='go-back'>
<div class='go-back-inner'>
<div>{{render '@icon' @root.icon-left}} Terug naar vacatures</div>
{{render '@icon' @root.icon-times}}
</div>
</div>
<div class='modal-inner'>
<div class='check-postcode'>
{{render '@heading--h5' checkbox-heading merge=true}}
{{render '@select'}}
{{render '@select'}}
<div class="atm-form-input">
<input id="" name="" class="form-input" value="Voer een postcode in">
<label class="atm-form-label form-label" for="headersearch">Voor een postcode in</label>
<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"></span>
</span>
</button>
</div>
</div>
<div class='wrapper-checkbox'>
{{render '@heading--h5' checkbox-heading merge=true}}
{{#each checkbox}}
{{render '@checkbox'}}
{{/each}}
<div class='read-more'>Toon meer <span class='atm-icon far fa-chevron-down fa-xs'></span></div>
<div class='read-less hide'>Toon minder <span class='atm-icon far fa-chevron-up fa-xs'></span></div>
</div>
<div class='wrapper-checkbox'>
{{render '@heading--h5' checkbox-heading merge=true}}
{{#each checkbox}}
{{render '@checkbox'}}
{{/each}}
<div class='read-more'>Toon meer <span class='atm-icon far fa-chevron-down fa-xs'></span></div>
<div class='read-less hide'>Toon minder <span class='atm-icon far fa-chevron-up fa-xs'></span></div>
</div>
<div class='wrapper-checkbox'>
{{render '@heading--h5' checkbox-heading merge=true}}
{{#each checkbox}}
{{render '@checkbox'}}
{{/each}}
<div class='read-more'>Toon meer <span class='atm-icon far fa-chevron-down fa-xs'></span></div>
<div class='read-less hide'>Toon minder <span class='atm-icon far fa-chevron-up fa-xs'></span></div>
</div>
</div>
</div>
<div class='mobile-filter-btn'>{{render '@icon' @root.icon-filter}} Filter vacatures</div>
</div>
<div class='right'>
<div class='vacancy-results'>
{{render '@heading--h4' results merge=true}}
<div>{{render '@button-secondary' remove-filter merge=true}}</div>
</div>
<div class='vacancy-list-wrapper'>
{{#each vacancy}}
{{render '@vacancy-block'}}
{{/each}}
</div>
{{render '@pager'}}
</div>
</div>
</div>
{{render '@back-to-top'}}
</div>
{
"icon-left": {
"style": "fal",
"icon": "fa-chevron-left",
"modifier": "chevron-left",
"size": "fa-xs"
},
"icon-times": {
"style": "fal",
"icon": "fa-times",
"modifier": "icon-times",
"size": "fa-lg"
},
"icon-down": {
"style": "fal",
"icon": "fa-chevron-down",
"modifier": "chevron-down",
"size": "fa-xs"
},
"icon-up": {
"style": "fal",
"icon": "fa-chevron-up",
"modifier": "chevron-up",
"size": "fa-xs"
},
"icon-filter": {
"style": "far",
"icon": "fa-sliders-h",
"modifier": "sliders-h",
"size": "fa-xs"
},
"vacancy": [
{},
{},
{},
{},
{},
{},
{},
{},
{}
],
"checkbox-heading": {
"text": "Filter"
},
"checkbox": [
{},
{},
{},
{},
{},
{}
],
"results": {
"text": "30 resultaten"
},
"remove-filter": {
"text": "Verwijder filters",
"icon": false
}
}
.tpl-vacancy-overview {
.vacancy-intro {
@apply md:w-2/3;
}
.vacancy-overview-list {
@apply grid;
@apply md:grid-cols-12;
@apply gap-12 md:gap-16;
@apply mt-10 lg:mt-20 mb-20;
.left {
@apply md:col-span-3;
@apply lg:col-span-2;
.modal {
@apply hidden md:block fixed top-0 left-0 overflow-y-auto h-full z-50 w-full md:w-auto bg-white md:relative;
&::-webkit-scrollbar {
width: 1px;
}
.modal-inner {
@apply p-6 pt-[80px] md:p-0;
}
&.active {
@apply block;
}
.wrapper-checkbox {
@apply mb-8;
.last-item ~ .atm-form-checkbox {
@apply hidden;
}
.read-more,
.read-less {
@apply text-primary;
&.hide {
@apply hidden;
}
}
}
}
.go-back {
@apply fixed w-full z-50 top-0 left-0 md:hidden py-4 border-b border-solid bg-white;
.go-back-inner {
@apply px-4 flex justify-between items-center;
}
}
.mobile-filter-btn {
@apply md:hidden py-4 border-b border-t border-solid text-center;
}
.check-postcode {
@apply mb-8;
.atm-form-select {
@apply mb-4;
.form-select {
@apply w-full;
}
}
.atm-form-input {
@apply relative w-full mb-4;
.form-input {
@apply w-full h-auto border-0 border-b px-0 pt-0 rounded-none;
}
.form-label {
@apply text-gray-300 p-0;
}
.atm-button {
@apply absolute bottom-2 right-1;
@apply bg-white m-0;
.atm-icon {
@apply text-black;
}
}
}
}
}
.right {
@apply md:col-span-9;
@apply lg:col-span-10;
@apply p-10;
@apply bg-primary-100;
.vacancy-results {
@apply flex;
@apply mb-10;
.atm-heading {
@apply mr-7;
}
}
.vacancy-list-wrapper {
@apply grid;
@apply grid-cols-1;
@apply gap-4;
}
.atm-pager {
@apply mt-10;
}
}
}
}
(function () {
'use strict';
[...document.querySelectorAll('.wrapper-checkbox')].forEach(($el) => {
const maxElements = $($el).find('.atm-form-checkbox').length;
if (maxElements > 5) {
$($el).find('.atm-form-checkbox:eq(4)').addClass('last-item');
} else {
$($el).find('.read-more').addClass('hide');
}
$($el)
.find('.read-more')
.on('click', function (e) {
e.preventDefault();
$($el)
.find('.atm-form-checkbox:eq(4)')
.removeClass('last-item');
$($el).find('.read-less').removeClass('hide');
$($el).find('.read-more').addClass('hide');
});
$($el)
.find('.read-less')
.on('click', function (e) {
e.preventDefault();
$($el).find('.atm-form-checkbox:eq(4)').addClass('last-item');
$($el).find('.read-more').removeClass('hide');
$($el).find('.read-less').addClass('hide');
});
});
$('.mobile-filter-btn').on('click', function (e) {
e.preventDefault();
$('.left .modal').addClass('active');
});
$('.go-back').on('click', function (e) {
e.preventDefault();
$('.left .modal').removeClass('active');
});
})();
No notes defined.