<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>
<section class="org-vacancy-highlight-block">
<div class="vebego-container">
<div class="vacancy-highlight-block-top">
{{render '@heading' heading}}
</div>
<div class="vacancy-grid swiper-container">
<div class="swiper-wrapper">
{{#each cards}}
<div class="swiper-slide">
{{render "@vacancy-highlight" this merge=true}}
</div>
{{/each}}
</div>
</div>
<div class="bottom-wrapper">
<div class="swiper-pagination"></div>
<div class="button-wrapper">
{{render '@button-primary--icon-left-md' button merge=true}}
</div>
</div>
</div>
</section>
{
"heading": {
"text": "Relevant voor jou",
"tag": "h1"
},
"cards": [
{
"paragraph": false
},
{
"paragraph": false
},
{
"paragraph": false
}
],
"button": {
"text": "Meer weten",
"icon": {
"style": "fal",
"icon": "fa-circle"
}
}
}
.org-vacancy-highlight-block {
@apply py-16 overflow-hidden;
.vacancy-highlight-block-top {
@apply mb-10;
.atm-heading {
@apply text-secondary-col-1 mb-0;
}
}
.vacancy-grid {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8;
&.swiper-container {
@apply block overflow-visible;
clip-path: polygon(0 0, 200% 0, 200% 100%, 0% 100%);
.swiper-wrapper {
@apply flex;
}
.swiper-slide {
@apply h-auto;
}
}
}
.bottom-wrapper {
@apply flex justify-between lg:justify-center items-center;
.swiper-pagination {
@apply flex-1 xl:hidden flex items-center relative;
&-bullet {
@apply bg-secondary-col-2 bg-opacity-50 rounded-full transition-all duration-300 p-1 mx-1 cursor-pointer;
&-active {
@apply bg-opacity-100 w-4;
}
}
}
.button-wrapper {
@apply flex-shrink-0;
}
}
@media (min-width: 1280px) {
.vacancy-grid.swiper-container {
@apply grid;
.swiper-wrapper {
@apply contents;
}
}
.swiper-pagination {
@apply hidden;
}
}
}
(function () {
'use strict';
var vacancyHighlightBlocks = document.querySelectorAll(
'.org-vacancy-highlight-block'
);
for (var i = 0; i < vacancyHighlightBlocks.length; i++) {
const vacancyGrid =
vacancyHighlightBlocks[i].querySelector('.vacancy-grid');
if (!vacancyGrid) continue;
const paginationEl =
vacancyHighlightBlocks[i].querySelector('.swiper-pagination');
new Swiper(vacancyGrid, {
slidesPerView: 1.2,
spaceBetween: 16,
watchOverflow: true,
pagination: {
el: paginationEl,
clickable: true,
type: 'bullets',
},
breakpoints: {
640: {
slidesPerView: 2.1,
spaceBetween: 24,
},
1280: {
slidesPerView: 3,
spaceBetween: 24,
enabled: false,
},
},
});
}
})();
No notes defined.