<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-blog-page">
<div class="progress-container">
<div class="progress-bar" id="scrollIndicator"></div>
</div>
<div>
<div class="blog-page-content">
<div class="image">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/258/1170/600" alt="">
</picture>
</div>
<div class="content">
<div class="content-block">
<div class="mol-title ">
<span class="atm-heading h1">5 tips om de betrokkenheid van werknemers te verhogen</span>
</div>
</div>
<div class="content-block">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/258/1170/600" alt="">
</picture>
</div>
<div class="content-block">
<section class="org-video-block">
<div class="vebego-container">
<div class="wrapper">
<h2 class="atm-heading ">Relevant voor jou</h2>
<div class="mol-video-player">
<div class="video-player-video">
<div class="thumbnail">
<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>
<button class="atm-play " title="Bekijk film">
<i class="atm-icon fal fa-play-circle fa-md "></i>
<span class="text">
Bekijk film
</span>
</button>
</div>
<div class="atm-video">
<iframe src="https://www.youtube.com/embed/L6LsRTfQGDo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</div>
</section>
</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="content-block">
<div class="mol-text-highlight">
<div class="vebego-container">
<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>
</div>
<div class="content-block">
<section class="org-video-block">
<div class="vebego-container">
<div class="wrapper">
<h2 class="atm-heading ">Relevant voor jou</h2>
<div class="mol-video-player">
<div class="video-player-video">
<div class="thumbnail">
<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>
<button class="atm-play " title="Bekijk film">
<i class="atm-icon fal fa-play-circle fa-md "></i>
<span class="text">
Bekijk film
</span>
</button>
</div>
<div class="atm-video">
<iframe src="https://www.youtube.com/embed/L6LsRTfQGDo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="social">
<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>
<ul class="mol-social-media vertical xs">
<li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="atm-icon fa-brands fa-facebook-f fa-xs "></i>
</a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon fa-brands fa-instagram fa-xs "></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-xs "></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-xs "></i>
</a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"> <i class="atm-icon fa-brands fa-whatsapp fa-xs "></i>
</a></li>
</ul>
</div>
</div>
<div class="vebego-container">
<div>
<div class="org-article-block">
<div class="article-block-top">
<h1 class="atm-heading ">Relevant voor jou</h1>
<div class="pagination">
<div class="swiper-prev"> <i class="atm-icon fa-solid fa-long-arrow-left fa-md "></i>
</div>
<div class="swiper-next"> <i class="atm-icon fa-solid fa-long-arrow-right fa-md "></i>
</div>
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="mol-card-extended js--clickable">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div>
<span class="atm-heading h-subtitle">FM Trends</span>
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="grid grid-cols-2">
<div class="reading-time">
<i class="atm-icon far fa-eye fa-sm "></i>
<span class="text">8 minuten</span>
</div>
</div>
</div>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</div>
</div>
<div class="swiper-slide">
<div class="mol-card-extended js--clickable">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div>
<span class="atm-heading h-subtitle">FM Trends</span>
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="grid grid-cols-2">
<div class="reading-time">
<i class="atm-icon far fa-eye fa-sm "></i>
<span class="text">8 minuten</span>
</div>
</div>
</div>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</div>
</div>
<div class="swiper-slide">
<div class="mol-card-extended js--clickable">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div>
<span class="atm-heading h-subtitle">FM Trends</span>
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="grid grid-cols-2">
<div class="reading-time">
<i class="atm-icon far fa-eye fa-sm "></i>
<span class="text">8 minuten</span>
</div>
</div>
</div>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</div>
</div>
<div class="swiper-slide">
<div class="mol-card-extended js--clickable">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/200" alt="">
</picture>
<div>
<span class="atm-heading h-subtitle">FM Trends</span>
<h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<div class="grid grid-cols-2">
<div class="reading-time">
<i class="atm-icon far fa-eye fa-sm "></i>
<span class="text">8 minuten</span>
</div>
</div>
</div>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</div>
</div>
</div>
</div>
<div class="vebego-container">
<a class="atm-button atm-button-primary button-md icon-right ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Meer weten</span>
<i class="atm-icon fal fa-chevron-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
</div>
{{render '@breadcrumbs'}}
<div class="tpl-blog-page">
<div class="progress-container">
<div class="progress-bar" id="scrollIndicator"></div>
</div>
<div>
<div class="blog-page-content">
<div class="image">
{{render '@image' image}}
</div>
<div class="content">
<div class="content-block">
{{render '@title' title merge=true}}
</div>
<div class="content-block">
{{render '@image' image}}
</div>
<div class="content-block">
{{render '@video-block'}}
</div>
<div class="content-block">
{{render '@image-slider'}}
</div>
<div class="content-block">
{{render '@text-highlight'}}
</div>
<div class="content-block">
{{render '@video-block'}}
</div>
</div>
<div class="social">
{{render '@social-media--vertical'}}
{{render '@social-media--vertical-xs'}}
</div>
</div>
<div class="vebego-container">
{{#if blogs}}
<div>
{{render '@article-block'}}
</div>
{{/if}}
</div>
</div>
{
"image": {
"src": "https://picsum.photos/id/258/1170/600"
},
"title": {
"heading": {
"text": "5 tips om de betrokkenheid van werknemers te verhogen"
},
"subtitle": false,
"underline": false
},
"title-relevant": {
"heading": {
"text": "Meer verhalen"
},
"subtitle": false
},
"blog": [
{},
{},
{}
],
"blogs": true
}
.tpl-blog-page {
@apply pt-6 overflow-hidden;
.blog-page-content {
@apply mb-24;
@apply relative;
@apply md:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* See comment on top */
grid-template-rows: 380px minmax(0, 1fr); /* See comment on top */
@screen md {
grid-template-columns: 0.8fr minmax(0, 1fr) minmax(0, 1fr) 0.8fr; /* See comment on top */
}
@screen lg {
grid-template-columns: 0.8fr minmax(0, 1fr) minmax(0, 1fr) 0.8fr; /* See comment on top */
grid-template-rows: 600px minmax(0, 1fr); /* See comment on top */
}
.vebego-container {
@apply p-0;
}
.image {
grid-area: 1 / 1 / 2 / 3;
@apply md:overflow-hidden;
@screen md {
grid-area: 1 / 1 / 2 / 5;
}
@apply w-auto;
@apply h-full;
.atm-image {
@apply h-full;
}
img {
height: 380px;
@apply w-full;
@apply md:h-full;
object-fit: cover;
}
.ambient {
@apply relative;
}
}
.social {
grid-area: 2 / 2 / 4 / 3;
@apply absolute;
@apply md:relative;
@apply top-0;
@apply md:top-auto;
@apply right-8;
@apply md:right-auto;
@apply mt-12;
@apply text-center;
@screen md {
grid-area: 3 / 4 / 4 / 5;
}
.mol-social-media {
@apply hidden;
@apply md:inline-flex;
li a {
@apply bg-black;
.atm-icon {
@apply text-white;
}
}
}
.xs {
@apply block;
@apply md:hidden;
}
}
.content {
grid-area: 3 / 1 / 4 / 3;
@apply mx-4;
@apply md:mx-0;
@apply bg-white;
@apply pt-9 pb-1;
@apply block;
@screen md {
grid-area: 3 / 2 / 4 / 4;
}
h1 {
@apply mb-6 md:mb-10 text-secondary-col-1;
}
.blog-intro {
@apply mb-12;
p {
@apply text-primary;
}
}
.content-block {
@apply mb-8;
}
.org-video-block .atm-heading {
@apply mb-0;
}
}
.contact {
@apply hidden;
@apply lg:block;
grid-area: 2 / 1 / 4 / 2;
}
}
.blog-relevant {
@apply mb-20;
.atm-heading {
@apply mb-10;
}
.wrapper {
@apply grid;
@apply gap-8;
@apply grid-cols-1;
@apply md:gap-16;
@apply md:grid-cols-2;
@apply lg:grid-cols-3;
}
}
}
No notes defined.