<div class='tpl-vacancy-page-vacancies'>
<div class="hero-content-wrapper">
<section class="org-vacancy-page-hero">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/263/360" alt="">
</picture>
<div class="hero-content-wrapper">
<div class="hero-content">
<h2 class="atm-heading ">Relevant voor jou</h2>
<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>
<div class="hero-links">
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Button</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
<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>
</div>
</section>
</div>
<div class="vebego-container">
<div class="vacancy-container">
<div class="left">
<h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>
<h2 class="atm-heading ">The quick brown fox jumps over the lazy dog</h2>
<div class="atm-paragraph text-lg">
<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 class="content-block">
<ul>
<li>
<div class="atm-paragraph text-lg">Facility Management</div>
</li>
<li>
<div class="atm-paragraph text-lg">Exploitatie en behee</div>
</li>
<li>
<div class="atm-paragraph text-lg">Facility services</div>
</li>
<li>
<div class="atm-paragraph text-lg">Vastgoed</div>
</li>
<li>
<div class="atm-paragraph text-lg">Huisvesting</div>
</li>
</ul>
</div>
</div>
<div class="right">
<section class="org-salary-calculator-block" data-component="salary-calculator" data-base-salary="10.5">
<div class="vebego-container">
<div class="calculator-content">
<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="calculator-left">
<h1 class="atm-heading ">Bereken direct je salaris</h1>
<div class="sliders">
<div class="atm-range-slider" data-component="range-slider">
<div class="slider-wrapper">
<label for="calc-age-slider">Leeftijd</label>
<div class="slider-track">
<input type="range" id="calc-age-slider" name="age" min="15" max="21" value="17" step="1">
<div class="slider-value"><span>17</span></div>
</div>
</div>
</div>
<div class="atm-range-slider" data-component="range-slider">
<div class="slider-wrapper">
<label for="calc-hours-slider">Aantal uur</label>
<div class="slider-track">
<input type="range" id="calc-hours-slider" name="hours" min="1" max="40" value="40" step="1">
<div class="slider-value"><span>40</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="calculator-right">
<div class="results">
<p class="result-description" data-result-text>Wanneer je 40 uur per week werkt en je bent 17 jaar oud, dan verdien je per uur:</p>
<div class="result-amount" data-result-hourly>€0.00</div>
<p class="result-description">Per week verdien je dan (bruto):</p>
<div class="result-amount" data-result-weekly>€0.00</div>
</div>
<div class="disclaimer">
<div class="atm-paragraph text-md">Deze berekening is een indicatie en kunnen geen rechten aan worden ontleend.</div>
</div>
</div>
</div>
</div>
</section>
<section class="org-vacancy-contact-block">
<div class="contact-block-intro">
<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>
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
</div>
<div>
<div class="atm-paragraph text-h5">
<p>Annabel van de Baan</p>
</div>
<div class="atm-paragraph text-h6">
<p>Recruiter</p>
</div>
</div>
</div>
<div class="atm-heading h2">Meer weten over deze vacature?</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-external-link "></i>
06-12345678
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-external-link "></i>
Stuur een WhatsApp-bericht
</div>
</section>
</div>
</div>
</div>
<div class='vebego-container'>
<div class='content'>
<div class='steps-block'>
<div class="mol-steps-block">
<div class="swiper-top">
<div class="slider-heading">
<h2 class="atm-heading ">Zo gemakkelijk is solliciteren</h2>
</div>
</div>
<div class="mol-step-slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="atm-step">
<div class="atm-badge ">Stap 1</div>
<h5 class="atm-heading ">Solliciteer hier!</h5>
<div class="atm-paragraph text-md">Gebruik het formulier op deze pagina! We reageren binnen 2 werkdagen op jouw sollicitatie!</div>
</div>
</div>
<div class="swiper-slide">
<div class="atm-step">
<div class="atm-badge ">Stap 1</div>
<h5 class="atm-heading ">We bellen je</h5>
<div class="atm-paragraph text-md">We stellen je een aantal vragen om te kijken of de functie bij je past.</div>
</div>
</div>
<div class="swiper-slide">
<div class="atm-step">
<div class="atm-badge ">Stap 1</div>
<h5 class="atm-heading ">Eerste gesprek</h5>
<div class="atm-paragraph text-md">Is het een match? Ontmoet je toekomstige collega's en vraag ze alles wat je wilt.</div>
</div>
</div>
<div class="swiper-slide">
<div class="atm-step">
<div class="atm-badge ">Stap 1</div>
<h5 class="atm-heading ">Welkom bij het team!</h5>
<div class="atm-paragraph text-md">Je bent aangenomen! We zorgen voor een goede onboarding zodat je snel aan de slag kunt.</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<div class="swiper-pagination"></div>
<div>
<div class="swiper-prev"> <i class="atm-icon far fa-chevron-left "></i>
</div>
<div class="swiper-next"> <i class="atm-icon far fa-chevron-right "></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='vacancy-apply'>
<div class="mol-title ">
<span class="atm-heading h1">E-Learning Specialist (m/w/d) - Erfurt</span>
</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>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Solliciteer direct</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class='vacancy-highlight-block'>
<section class="org-vacancy-highlight-block">
<div class="vebego-container">
<div class="vacancy-highlight-block-top">
<h1 class="atm-heading ">Relevant voor jou</h1>
</div>
<div class="vacancy-grid swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="mol-vacancy-highlight">
<div class="vacancy-image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div class="atm-badge bg-accent-3 text-black">Stap 1</div>
</div>
<div class="vacancy-highlight-content">
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="vacancy-tags">
<div class="mol-icon-tag">
<i class="atm-icon far fa-map-marker-alt fa-sm "></i>
Maastricht
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-clock fa-sm "></i>
Vrijdag 12 oktober
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-wallet fa-sm "></i>
€ 2.500 - € 3.000
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-building fa-sm "></i>
Groenvoorziening
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-face-smile fa-lg "></i>
Opleidingen en intern doorgroeien
</div>
</div>
<div class="vacancy-highlight-bottom">
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Bekijk vacature</a>
<div class="button-wrapper">
<a class="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 fal fa-arrow-right fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="mol-vacancy-highlight">
<div class="vacancy-image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div class="atm-badge bg-accent-3 text-black">Stap 1</div>
</div>
<div class="vacancy-highlight-content">
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="vacancy-tags">
<div class="mol-icon-tag">
<i class="atm-icon far fa-map-marker-alt fa-sm "></i>
Maastricht
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-clock fa-sm "></i>
Vrijdag 12 oktober
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-wallet fa-sm "></i>
€ 2.500 - € 3.000
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-building fa-sm "></i>
Groenvoorziening
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-face-smile fa-lg "></i>
Opleidingen en intern doorgroeien
</div>
</div>
<div class="vacancy-highlight-bottom">
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Bekijk vacature</a>
<div class="button-wrapper">
<a class="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 fal fa-arrow-right fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="mol-vacancy-highlight">
<div class="vacancy-image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div class="atm-badge bg-accent-3 text-black">Stap 1</div>
</div>
<div class="vacancy-highlight-content">
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="vacancy-tags">
<div class="mol-icon-tag">
<i class="atm-icon far fa-map-marker-alt fa-sm "></i>
Maastricht
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-clock fa-sm "></i>
Vrijdag 12 oktober
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-wallet fa-sm "></i>
€ 2.500 - € 3.000
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-building fa-sm "></i>
Groenvoorziening
</div>
<div class="mol-icon-tag">
<i class="atm-icon far fa-face-smile fa-lg "></i>
Opleidingen en intern doorgroeien
</div>
</div>
<div class="vacancy-highlight-bottom">
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Bekijk vacature</a>
<div class="button-wrapper">
<a class="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 fal fa-arrow-right fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-wrapper">
<div class="swiper-pagination"></div>
<div class="button-wrapper">
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-circle "></i>
<span>Meer weten</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class='tpl-vacancy-page-vacancies'>
<div class="hero-content-wrapper">
{{render '@vacancy-page-hero'}}
</div>
<div class="vebego-container">
<div class="vacancy-container">
<div class="left">
{{render '@heading--h5'}}
{{render '@heading--h2'}}
{{render '@paragraph--large'}}
<div class="content-block">
<ul>
{{#each items}}
<li>
{{render "@paragraph--large" this merge=true}}
</li>
{{/each}}
</ul>
</div>
</div>
<div class="right">
{{render '@salary-calculator-block'}}
{{render '@vacancy-contact-block'}}
</div>
</div>
</div>
<div class='vebego-container'>
<div class='content'>
<div class='steps-block'>
{{render '@steps-block'}}
</div>
<div class='vacancy-apply'>
{{render '@title' title}}
{{render '@specs-list'}}
{{#each buttonsPrimary}}
{{render '@button-primary' this merge=true}}
{{/each}}
{{#each buttonsSecondary}}
{{render '@button-secondary' this merge=true}}
{{/each}}
</div>
<div class='vacancy-highlight-block'>
{{render '@vacancy-highlight-block'}}
</div>
</div>
</div>
</div>
{
"title": {
"heading": {
"tag": "span",
"modifier": "h1",
"text": "E-Learning Specialist (m/w/d) - Erfurt"
},
"subtitle": false,
"underline": false
},
"buttonsPrimary": [
{
"text": "Solliciteer direct"
}
],
"items": [
{
"text": "Facility Management"
},
{
"text": "Exploitatie en behee"
},
{
"text": "Facility services"
},
{
"text": "Vastgoed"
},
{
"text": "Huisvesting"
}
],
"vacancy": [
{},
{},
{}
]
}
.tpl-vacancy-page-vacancies {
@apply pt-[calc(var(--content-padding-top))] overflow-hidden;
.vacancy-container {
@apply gap-8;
@apply lg:grid lg:grid-cols-12;
p:empty {
min-height: 0 !important;
}
h3 {
@apply text-h1 block font-display font-medium mt-6 mb-6 text-secondary-col-1;
}
.left {
@apply col-span-6 order-1;
.atm-heading {
@apply text-secondary-col-1;
}
.atm-paragraph {
@apply mb-10;
ul {
@apply list-none p-0;
}
span {
@apply font-body text-md !important;
}
}
.mol-image-slider {
@apply mb-12;
}
.atm-button {
@apply mb-12;
}
.vacancy-benefits {
.atm-paragraph {
@apply mb-0;
}
}
}
.right {
@apply col-span-4 order-2 col-end-13 flex flex-col gap-4;
.org-salary-calculator-block .calculator-content {
@apply flex-wrap;
}
}
li {
@apply relative pl-8;
&::before {
content: '\f00c';
font-family: 'Font Awesome 6 Pro';
font-weight: 900;
@apply absolute left-0 text-primary;
}
}
}
.atm-button {
@apply mt-4;
}
.org-vacancy-intro-block {
@apply mb-24;
.org-vacancy-intro-block-container {
@apply md:grid md:grid-cols-12 gap-8 items-center;
.left {
@apply md:col-span-6 mb-6 md:mb-0;
.mol-specs-list {
@apply mb-6;
}
}
.right {
@apply md:col-start-7 md:col-end-13;
.mol-intro-media {
@apply mt-0;
.intro-media-image {
@apply top-0 ml-0 mr-0;
}
}
}
}
.org-vacancy-intro-block-container-no-img {
@apply md:grid items-center;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@screen md {
grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
}
@screen lg {
grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
}
@screen xl {
grid-template-columns: 1fr minmax(0, 1fr) minmax(0, 1fr) 1fr;
}
@screen 2xl {
grid-template-columns: 1.25fr minmax(0, 1fr) minmax(0, 1fr) 1.25fr;
}
.no-img {
@apply mx-4 md:mx-0 sm:px-12;
grid-area: auto / 2 / auto / 4;
}
}
}
.social {
.mol-social-media {
@apply flex flex-row mb-16;
}
}
.vacancy-content-wrapper {
@apply mb-24;
@apply md:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@screen md {
grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
}
@screen lg {
grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
}
@screen xl {
grid-template-columns: 1fr minmax(0, 1fr) minmax(0, 1fr) 1fr;
}
@screen 2xl {
grid-template-columns: 1.25fr minmax(0, 1fr) minmax(0, 1fr) 1.25fr;
}
}
.content {
@apply m-4;
@apply sm:p-12;
@apply md:m-0;
grid-area: auto / 2 / auto / 4;
.content-block {
@apply mb-12;
.vebego-container {
@apply p-0 m-0;
}
}
.vacancy-contact {
@apply md:flex;
@apply mb-10;
.wrap-image {
@apply relative py-8 pl-8;
@apply mb-10;
@apply md:mb-0;
@apply md:mr-10;
&::before {
content: '';
width: calc(100% - 2rem);
height: 100%;
@apply absolute left-0 top-0;
@apply bg-primary;
z-index: -1;
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
}
}
.vacancy-apply {
@apply lg:m-36 text-center;
.mol-title {
@apply mb-8;
}
.mol-specs-list {
@apply mb-8;
}
}
}
.vacancy-other {
@apply py-16 px-4 relative;
@apply grid;
@apply gap-6;
@apply justify-center;
.atm-heading {
@apply text-center text-white;
}
.org-vacancy-block {
@apply max-w-3xl;
@media (max-width: 640px) {
@apply p-4 pr-8;
}
.atm-heading {
@apply text-left text-black;
}
&:hover {
.atm-heading {
@apply text-white;
}
}
}
}
}
No notes defined.