<div class="tpl-blog-page">
<div class="progress-container">
<div class="progress-bar" id="scrollIndicator"></div>
</div>
<div class="vebego-container">
<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="contact">
<div class="mol-contact-block ">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/250/380" alt="">
</picture>
</div>
<div class="wrap-info">
<span class="atm-heading h4">Heb je nog vragen?</span>
<div class="atm-paragraph ">
<p>Neem contact op met onze kantoorcoach Annabel Janssen als je meer wilt weten. Zij helpt je graag!</p>
</div>
<div class="buttons">
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Contact opnemen</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-block">
<section class="org-cta-block">
<div class="vebego-container">
<div class="wrapper">
<div class="first">
<div class="wrap-info">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</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>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
<div class="second">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/768/432" alt="">
</picture>
</div>
</div>
</div>
</section>
</div>
<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">
<section class="org-video-block">
<div class="vebego-container">
<div class="wrapper">
<div class="first">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
</div>
<div class="second">
<div class="mol-intro-media">
<div class="intro-media-video">
<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>
<a class="atm-play " title="Bekijk film" href="https://www.youtube.com/embed/L6LsRTfQGDo" data-fslightbox>
<span class="atm-icon fal fa-play-circle fa-md "></span>
<span class="text">
Bekijk film
</span>
</a>
</div>
</div>
<div class="play-button">
<div class="button"></div>
</div>
</div>
</div>
</div>
</div>
<div class="content-block">
<section class='org-text-block'>
<div class='vebego-container'>
<div class="mol-title ">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
<div class='md:grid grid-cols-12 gap-8'>
<div class='col-span-4'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
<div class='col-span-4'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
<div class='col-span-4'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
<div class="mol-title ">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
<div class='md:grid grid-cols-12 gap-8'>
<div class='col-span-6'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
<div class='col-span-6'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
<div class='col-span-6'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
<div class="mol-title ">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
<div class='md:grid grid-cols-12 gap-8'>
<div class='col-start-3 col-span-8'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
<div class='col-start-3 col-span-8'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
<div class='col-start-3 col-span-8'>
<div class="mol-card-simple">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/400/400" alt="">
</picture>
</div>
<div>
<h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>
<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-primary button-md ">
<span class="button-content">
<span>Button 1</span>
</span>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 2</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span>Button 3</span>
<span class="atm-icon far fa-long-arrow-right "></span>
</span>
<span class="button-underline"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</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="content-block">
<div class="mol-text-highlight">
<div class="border"></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>
</div>
</div>
<div class="content-block">
<section class="org-video-block">
<div class="vebego-container">
<div class="wrapper">
<div class="first">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
</div>
<div class="second">
<div class="mol-intro-media">
<div class="intro-media-video">
<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>
<a class="atm-play " title="Bekijk film" href="https://www.youtube.com/embed/L6LsRTfQGDo" data-fslightbox>
<span class="atm-icon fal fa-play-circle fa-md "></span>
<span class="text">
Bekijk film
</span>
</a>
</div>
</div>
<div class="play-button">
<div class="button"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="social">
<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>
<ul class="mol-social-media vertical xs">
<li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><span class="atm-icon fab fa-facebook-f fa-xs "></span></a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon fab fa-instagram fa-xs "></span></a></li>
<li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon fab fa-twitter fa-xs "></span></a></li>
<li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon fab fa-youtube fa-xs "></span></a></li>
<li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon fab fa-linkedin-in fa-xs "></span></a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"><span class="atm-icon fab fa-whatsapp fa-xs "></span></a></li>
</ul>
</div>
</div>
<div class="blog-relevant">
<div class="mol-title title-underline">
<span class="atm-heading h1">Meer verhalen</span>
</div>
<div class="wrapper">
<div>
<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="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 class="mol-author">
<div>
<picture class="atm-image ">
<img class="" src="https://placehold.co/48x48" alt="">
</picture>
</div>
<div class="info">
<span class="authorname">Annabel Janssen</span>
<span class="subtitle">Expert kantoorcoach</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 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="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 class="mol-author">
<div>
<picture class="atm-image ">
<img class="" src="https://placehold.co/48x48" alt="">
</picture>
</div>
<div class="info">
<span class="authorname">Annabel Janssen</span>
<span class="subtitle">Expert kantoorcoach</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 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="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 class="mol-author">
<div>
<picture class="atm-image ">
<img class="" src="https://placehold.co/48x48" alt="">
</picture>
</div>
<div class="info">
<span class="authorname">Annabel Janssen</span>
<span class="subtitle">Expert kantoorcoach</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>
</div>
<div class="tpl-blog-page">
<div class="progress-container">
<div class="progress-bar" id="scrollIndicator"></div>
</div>
<div class="vebego-container">
<div class="blog-page-content">
<div class="image">
{{render '@image' image}}
</div>
<div class="contact">
{{render '@contact-block'}}
</div>
<div class="content">
<div class="content-block">
{{render '@cta-block'}}
</div>
<div class="content-block">
{{render '@title' title merge=true}}
</div>
<div class="content-block">
{{render '@video-block'}}
</div>
<div class="content-block">
{{render '@text-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>
{{#if blogs}}
<div class="blog-relevant">
{{render '@title' title-relevant merge=true}}
<div class="wrapper">
{{#each blog}}
<div>
{{render '@card-extended--contact-person'}}
</div>
{{/each}}
</div>
</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 {
/* BVO 17-05-2021:
* Replace 1fr values in grid templates with 'hack fix'
* minmax(0, 1fr) to preven SwiperJS miscalculate stuff in Firefox.
* See: https://github.com/nolimits4web/swiper/issues/2914
*/
.blog-page-content {
@apply mb-24;
@apply relative;
@apply grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* See comment on top */
grid-template-rows: 280px 100px minmax(0, 1fr); /* See comment on top */
@screen md {
grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr; /* See comment on top */
grid-template-rows: 280px 100px minmax(0, 1fr); /* See comment on top */
}
@screen lg {
grid-template-columns: 0.6fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr; /* See comment on top */
grid-template-rows: 450px 160px minmax(0, 1fr); /* See comment on top */
}
.image {
grid-area: 1 / 1 / 3 / 3;
@apply md:overflow-hidden;
@apply bg-primary-100;
@screen md {
grid-area: 1 / 1 / 3 / 5;
}
@apply w-auto;
@apply h-full;
img {
height: 380px;
@apply w-full;
@apply md:h-full;
object-fit: cover;
}
}
.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;
}
.xs {
@apply block;
@apply md:hidden;
}
}
.content {
grid-area: 2 / 1 / 4 / 3;
@apply mx-2 md:mx-4;
@apply md:mx-0;
@apply bg-white;
@apply p-4 md:p-12;
@apply block;
@screen md {
grid-area: 2 / 2 / 4 / 4;
}
.wrap-info {
@apply md:min-h-[370px];
}
.mol-title {
@apply mb-6 md:mb-14;
}
.blog-intro {
@apply mb-12;
}
.content-block {
@apply mb-8;
}
.org-text-block .mol-title {
@apply text-left mb-5;
}
.org-video-block .mol-title {
@apply mb-0;
}
}
.contact {
@apply hidden;
@apply lg:block;
grid-area: 2 / 1 / 4 / 2;
}
}
.blog-relevant {
@apply mb-20;
.mol-title {
@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;
}
}
.org-cta-block {
.wrapper {
display: flex;
flex-direction: column;
}
.first {
order: 2;
@apply m-0;
.mol-title {
@apply text-left;
}
}
.second {
order: 1;
@apply m-0;
.atm-image img {
@apply w-full;
}
}
@screen md {
.wrapper {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
gap: 0px 0px;
grid-template-areas:
'image'
'text';
}
.first {
grid-area: text;
}
.second {
grid-area: image;
}
}
@screen lg {
.wrapper {
grid-auto-columns: 1fr;
grid-template-columns: 1fr 1fr;
grid-template-rows: 0.4fr 1fr;
}
.first {
grid-area: 2 / 1 / 3 / 2;
}
.second {
grid-area: 1 / 1 / 3 / 3;
}
}
@screen xl {
.wrapper {
grid-template-rows: 0.5fr 1fr;
}
}
}
}
No notes defined.