<div class='tpl-vacancy-page'>
<div class='vebego-container'>
<section class="org-vacancy-intro-block">
<div class="vebego-container">
<div class="md:grid md:grid-cols-12 gap-8">
<div class="md:col-span-4 pt-16">
<div class="mol-title ">
<span class="atm-heading h-subtitle">Vacature</span>
<span class="atm-heading h1">E-Learning Specialist (m/w/d) - Erfurt</span>
</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>
<a class="atm-button atm-button-primary button-lg ">
<span class="button-content">
<span>Solliciteer direct</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
<div class="md:col-start-7 md:col-end-13">
<div class="mol-intro-media">
<div class="intro-media-image">
<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>
</div>
</div>
</section>
<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" data-autoplay="true">
<div class="swiper-wrapper">
<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="swiper-pagination"></div>
</div>
</div>
</div>
<div class='vacancy-contact'>
<div class='wrap-image'>
<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>
<h3 class="atm-heading ">The quick brown fox jumps over the lazy dog</h3>
<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>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</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>
<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>
<a class="atm-button atm-button-primary button-lg ">
<span class="button-content">
<span>Solliciteer direct</span>
</span>
<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"><span class="atm-icon fab fa-facebook-f fa-lg "></span></a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon fab fa-instagram fa-lg "></span></a></li>
<li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon fab fa-twitter fa-lg "></span></a></li>
<li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon fab fa-youtube fa-lg "></span></a></li>
<li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon fab fa-linkedin-in fa-lg "></span></a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"><span class="atm-icon fab fa-whatsapp fa-lg "></span></a></li>
</ul>
</div>
</div>
<div class='vacancy-other'>
<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>
<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>
<div class='tpl-vacancy-page'>
<div class='vebego-container'>
{{render '@vacancy-intro-block'}}
<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-contact'>
<div class='wrap-image'>
{{render '@image'}}
</div>
<div>
{{render '@heading--h3'}}
{{render '@paragraph'}}
{{render '@button-secondary'}}
</div>
</div>
<div class='vacancy-apply'>
{{render '@title' title}}
{{render '@specs-list'}}
{{#each buttonsPrimary}}
{{render '@button-primary--lg' this merge=true}}
{{/each}}
{{#each buttonsSecondary}}
{{render '@button-secondary--lg' 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 '@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 {
.org-vacancy-intro-block {
@apply mb-24;
}
.social {
.mol-social-media {
@apply flex flex-row mb-16;
}
}
.content {
@apply max-w-2xl;
@apply mx-4;
@apply md:m-auto;
@apply mb-8;
.content-block {
@apply mb-12;
}
.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-100;
z-index: -1;
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
}
}
.vacancy-apply {
.mol-title {
@apply mb-8;
}
.mol-specs-list {
@apply text-center;
@apply justify-center;
@apply mb-8;
}
}
}
.vacancy-other {
@apply p-10;
@apply bg-primary-100;
@apply grid;
@apply gap-4;
@apply justify-center;
.atm-heading {
@apply text-center;
}
.org-vacancy-block {
@apply max-w-3xl;
.atm-heading {
@apply text-left;
}
}
}
}
No notes defined.