<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-page'>
<div class='vebego-container'>
<div class='content'>
<div class='content-block'>
<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>
<div class='content-block'>
<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='content-block'>
<div class="mol-image-slider">
<div class="swiper-container">
<div class="swiper-wrapper relative">
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/231/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/232/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/234/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/235/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/236/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/237/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/238/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/239/960/540" alt="">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/2/960/540" alt="">
</picture>
</div>
</div>
</div>
<div class="slider-navigation">
<div class="vebego-container">
<div class="slider-navigation-wrapper">
<div class="slider-navigation-button slider-navigation-prev"> <i class="atm-icon fa-solid fa-angle-left fa-md "></i>
</div>
<div class="slider-navigation-button slider-navigation-next"> <i class="atm-icon fa-solid fa-angle-right fa-md "></i>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></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>
<div class="social">
<div class="font-bold">Deel dit bericht:</h2>
<ul class="mol-social-media vertical ">
<li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="atm-icon fa-brands fa-facebook-f fa-lg "></i>
</a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon fa-brands fa-instagram fa-lg "></i>
</a></li>
<li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon fa-brands fa-x-twitter fa-lg "></i>
</a></li>
<li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon fa-brands fa-youtube fa-lg "></i>
</a></li>
<li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon fa-brands fa-linkedin-in fa-lg "></i>
</a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"> <i class="atm-icon fa-brands fa-whatsapp fa-lg "></i>
</a></li>
</ul>
</div>
</div>
<div class='vacancy-other'>
<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>
<h2 class="atm-heading ">The quick brown fox jumps over the lazy dog</h2>
<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>
{{render '@breadcrumbs'}}
<div class='tpl-vacancy-page'>
<div class='vebego-container'>
<div class='content'>
<div class='content-block'>
{{render '@paragraph--large'}}
</div>
<div class='content-block'>
{{render '@paragraph'}}
</div>
<div class='content-block'>
{{render '@image-slider'}}
</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>
<div class="social">
<div class="font-bold">Deel dit bericht:</h2>
{{render '@social-media--vertical'}}
</div>
</div>
<div class='vacancy-other'>
{{render "@ambient"}}
{{render '@heading--h2'}}
{{#each vacancy}}
{{render '@vacancy-block'}}
{{/each}}
</div>
</div>
{
"title": {
"heading": {
"tag": "span",
"modifier": "h1",
"text": "E-Learning Specialist (m/w/d) - Erfurt"
},
"subtitle": false,
"underline": false
},
"buttonsPrimary": [
{
"text": "Solliciteer direct"
}
],
"vacancy": [
{},
{},
{}
]
}
.tpl-vacancy-page {
@apply pt-[calc(var(--content-padding-top))] overflow-hidden;
.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:mt-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.