<div class="vebego-container" id="breadcrumbs-container">
<nav class="breadcrumbs test" role="navigation">
<span class="crumb">
<a class="atm-link " href="#" title="Betekenisvol werk" aria-label="" target="">Betekenisvol werk</a>
<i class="atm-icon far fa-external-link "></i>
</span>
<span class="crumb">
<a class="atm-link " href="#" title="Voor medewerkers" aria-label="" target="">Voor medewerkers</a>
<i class="atm-icon far fa-external-link "></i>
</span>
</nav>
</div>
<div class='tpl-vacancy-overview'>
<div class='vebego-container'>
<div class='vacancy-intro'>
<h1 class="atm-heading ">Vacatures</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 class="close-modal"> <i class="atm-icon chevron-left fal fa-chevron-left fa-xs "></i>
Terug naar vacatures</div>
<div><a class="atm-button atm-button-primary button-md icon-right ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Verwijder filters</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='modal-inner'>
<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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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">Antwerpen</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 class="show-vacancies">
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Toon 30 vacatures</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='right'>
<svg class="ambient absolute -z-10 h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1401 561" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_732_31)">
<path class="animate-wiggle" d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
<path class="animate-wiggle" opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
<path class="animate-wiggle" d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
<path class="animate-wiggle-2" d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
</g>
<defs>
<linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
<stop stop-color="#501D79" />
<stop offset="0.1001" stop-color="#562081" />
<stop offset="0.4029" stop-color="#980D7F" />
<stop offset="0.5587" stop-color="#871280" />
<stop offset="0.8653" stop-color="#5C1E81" />
<stop offset="0.9028" stop-color="#562081" />
<stop offset="1" stop-color="#501D79" />
</linearGradient>
<linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
<stop stop-color="#B92D85" stop-opacity="0.7" />
<stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
<stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
<stop offset="1" stop-color="#F69915" />
</linearGradient>
<linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
<stop stop-color="#D62B87" stop-opacity="0.7" />
<stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
<stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
<stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
<stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
<stop stop-color="#651B82" />
<stop offset="0.9974" stop-color="#901080" />
</linearGradient>
<clipPath id="clip0_732_31">
<rect width="1401" height="561" fill="white" />
</clipPath>
</defs>
</svg>
<div class='vacancy-results'>
<h4 class="atm-heading ">30 resultaten</h4>
<div class="desktop-filter-btn"><a class="atm-button atm-button-primary button-md icon-right ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Verwijder filters</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="mobile-filter-btn"><a class="atm-button atm-button-primary button-md icon-right ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Filter</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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>
<i class="atm-icon fas fa-circle fa-xs "></i>
Locatie
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
Aantal uren
</li>
<li>
<i class="atm-icon fas fa-circle fa-xs "></i>
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>
<i class="atm-icon far fa-chevron-right "></i>
<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="#">
<i class="atm-icon far fa-chevron-left "></i>
</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="#">
<i class="atm-icon far fa-chevron-right "></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mol-contact-info-cta" data-contact-cta data-contact-cta-state="not-active">
<button class="contact-cta-toggle atm-button atm-button-primary button-md icon-only button-icon-only">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon not-active far fa-message fa-fw" style="--scale: 1;"></i>
<i class="atm-icon active far fa-xmark fa-fw" style="--scale: 1;"></i>
</span>
</div>
<span class="button-triangle" style="--scale: 1;"></span>
</button>
<div id="contact-cta-link-wrapper">
<div id="back-to-top">
<a href="">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="46" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" />
<defs>
<radialGradient id="gradient" cx="1" cy="1" r="1.5">
<stop offset="0%" stop-color="#990D7F" />
<stop offset="100%" stop-color="#990D7F" />
</radialGradient>
</defs>
</svg>
<span class="atm-icon fa-light fa-arrow-up"></span>
</a>
</div>
<a class="atm-button atm-button-primary contact-cta-link button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon far fa-phone fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-primary contact-cta-link button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon far fa-envelope fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
{{render '@breadcrumbs'}}
<div class='tpl-vacancy-overview'>
<div class='vebego-container'>
<div class='vacancy-intro'>
{{render '@heading' 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 class="close-modal">{{render '@icon' @root.icon-left}} Terug naar vacatures</div>
<div>{{render '@button-primary--icon-md' remove-filter merge=true }}</div>
</div>
</div>
<div class='modal-inner'>
<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 class="show-vacancies">
{{render '@button-primary--md' show-results merge=true }}
</div>
</div>
</div>
<div class='right'>
{{render "@ambient"}}
<div class='vacancy-results'>
{{render '@heading--h4' results merge=true}}
<div class="desktop-filter-btn">{{render '@button-primary--icon-md' remove-filter merge=true }}</div>
<div class="mobile-filter-btn">{{render '@button-primary--icon-md' mobile-filter merge=true }}</div>
</div>
<div class='vacancy-list-wrapper'>
{{#each vacancy}}
{{render '@vacancy-block'}}
{{/each}}
</div>
{{render '@pager'}}
</div>
</div>
</div>
{{render '@contact-cta'}}
</div>
{
"heading": {
"text": "Vacatures",
"tag": "h1"
},
"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"
},
"show-results": {
"text": "Toon 30 vacatures"
},
"remove-filter": {
"text": "Verwijder filters"
},
"mobile-filter": {
"text": "Filter"
}
}
body.overflow {
@apply h-screen overflow-hidden;
}
.tpl-vacancy-overview {
@apply pt-[var(--content-padding-top)] overflow-hidden;
.vacancy-intro {
@apply p-4;
@apply md:p-0;
@apply lg:w-2/3;
h1.atm-heading {
@apply text-secondary-col-1 mb-6;
@apply sm:text-h1;
}
}
.vacancy-overview-list {
@apply grid mt-10 mb-20;
@apply md:grid-cols-12;
@apply lg:mt-20;
.left {
@apply mr-12;
@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-[9999999] md:z-50 w-full md:w-auto bg-white md:relative;
@apply md:h-auto md:relative md:block md:w-auto;
&::-webkit-scrollbar {
width: 1px;
}
.modal-inner {
@apply p-6 mt-32 mb-32;
@apply md:p-0 md:m-0 md:pl-1;
}
&.active {
@apply block;
}
.desktop-form {
@apply hidden;
@apply md:block;
}
.mobile-form {
@apply md:hidden;
}
.atm-button{
@apply m-0;
}
.wrapper-checkbox {
@apply mb-8;
.atm-form-checkbox {
@apply mb-1;
}
.last-item ~ .atm-form-checkbox {
@apply hidden;
}
.read-more,
.read-less {
@apply text-secondary-col-1 cursor-pointer;
&.hide {
@apply hidden;
}
}
}
}
.go-back {
@apply fixed w-full z-50 top-0 left-0 border-b border-solid bg-secondary-col-1;
@apply md:hidden;
.go-back-inner {
@apply py-6 px-4 flex justify-between items-center text-white;
* {
@apply cursor-pointer;
}
}
}
.mobile-filter-btn {
@apply border-solid text-center;
@apply md:hidden;
.atm-button {
@apply m-0;
}
}
.check-postcode {
@apply mb-8;
.check-postcode-wrapper{
@apply flex mb-4;
}
.atm-form-select {
.form-select {
@apply w-full;
}
}
.atm-form-input {
@apply relative w-full;
.form-input {
@apply w-full border-0 border-b p-0 rounded-none;
}
.form-label {
@apply text-gray-300 p-0 w-[max-content] left-0;
}
}
.atm-button {
@apply bg-white m-0 p-0 rounded-none border-b;
.button-content{
height: 100%;
}
.atm-icon {
@apply text-black;
&::after{
content: none;
}
}
}
}
.show-vacancies {
@apply fixed bottom-0 left-0 bg-white p-6 w-full z-[999] text-center;
@apply md:hidden;
-webkit-box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
}
}
.right {
@apply relative p-3 self-start;
@apply md:col-span-9 md:p-10;
@apply lg:col-span-10;
svg {
@apply top-0 left-0;
}
.vacancy-results {
@apply grid justify-between items-center p-4;
@apply md:mb-10 md:p-0;
grid-template-columns: 1fr 1fr;
.desktop-filer-btn, .mobile-filter-btn{
grid-area: 1 / 2 / 1 / 3;
}
.desktop-filter-btn {
@apply hidden justify-self-end;
@apply md:block;
}
.mobile-filter-btn {
@apply justify-self-end;
@apply md:hidden;
}
.atm-heading {
@apply m-0 text-white;
}
.atm-button {
@apply m-0;
}
}
.vacancy-list-wrapper {
@apply grid gap-3 grid-cols-1 mt-3;
@apply md:gap-4;
.no-vacancies {
@apply text-white text-center;
}
}
.atm-pager {
@apply mt-10 text-white font-display;
a {
&:hover {
@apply text-white;
font-weight: bold;
}
&.active {
@apply bg-[transparent] text-white border-2 border-white;
}
}
li {
&:first-child {
a {
@apply bg-[transparent] text-white;
}
}
&:last-child {
a {
@apply bg-[transparent] text-white;
}
}
&:last-child,
&:first-child {
a:hover {
@apply bg-white text-secondary-col-1;
}
}
}
}
}
}
}
(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');
$('body').addClass('overflow');
});
$('.close-modal').on('click', function (e) {
e.preventDefault();
$('.left .modal').removeClass('active');
$('body').removeClass('overflow');
});
})();
No notes defined.