<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-overview">
<section class='org-content-header'>
<div class='content-header-image swiper content-header-swiper-images'>
<div class="swiper-wrapper">
<div class='swiper-slide'>
<img src="https://picsum.photos/id/10/5000/5000" alt="">
</div>
<div class='swiper-slide'>
<img src="https://picsum.photos/id/15/5000/5000" alt="">
</div>
<div class='swiper-slide'>
<img src="https://picsum.photos/id/5/5000/5000" alt="">
</div>
</div>
</div>
<div class='vebego-container'>
<div class="content-header-slider-wrapper swiper content-header-swiper-cards" thumbsSlider="">
<div class="swiper-wrapper">
<div class='content-header-text swiper-slide'>
<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>
<div class="mol-card-extended js--clickable">
<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="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='content-header-text swiper-slide'>
<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>
<div class="mol-card-extended js--clickable">
<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="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='content-header-text swiper-slide'>
<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>
<div class="mol-card-extended js--clickable">
<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="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 class="swiper-pagination"></div>
</div>
</div>
</section>
<div class="vebego-container">
<div class="blog-overview-highlights">
<div class="title-wrap">
<div class="mol-tag-bubble">
<a class="atm-tag " title="This is a tag link" href="#">
<span>
Inspiratie
</span>
</a>
<a class="atm-tag " title="This is a tag link" href="#">
<span>
FM Trends
</span>
</a>
<a class="atm-tag active" title="This is a tag link" href="#">
<span>
Mega Trends
<i class="atm-icon fal fa-times "></i>
</span>
</a>
<a class="atm-tag " title="This is a tag link" href="#">
<span>
Sociale Trends
</span>
</a>
<a class="atm-tag " title="This is a tag link" href="#">
<span>
Technologische Trends
</span>
</a>
</div>
<div class="mol-inline-search">
<form action="#" method="get">
<div class="atm-form-input ">
<input class="form-input" type="search" id="input" name="input">
<label class="atm-form-label form-label " for="input">Verhalen zoeken</label>
<i class="atm-icon form-input-error-icon far fa-times "></i>
<i class="atm-icon form-input-valid-icon far fa-check "></i>
</div>
<button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon far fa-search fa-lg fa-fw"></i>
</span>
</div>
</button>
</form>
</div>
</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="grid grid-cols-2">
<div class="relative-date">
<i class="atm-icon far fa-calendar fa-sm "></i>
<span class="date">12 september</span>
</div>
<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 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="grid grid-cols-2">
<div class="relative-date">
<i class="atm-icon far fa-calendar fa-sm "></i>
<span class="date">12 september</span>
</div>
<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="blog-overview-highlights">
<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="grid grid-cols-2">
<div class="relative-date">
<i class="atm-icon far fa-calendar fa-sm "></i>
<span class="date">12 september</span>
</div>
<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 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="grid grid-cols-2">
<div class="relative-date">
<i class="atm-icon far fa-calendar fa-sm "></i>
<span class="date">12 september</span>
</div>
<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 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="grid grid-cols-2">
<div class="relative-date">
<i class="atm-icon far fa-calendar fa-sm "></i>
<span class="date">12 september</span>
</div>
<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 class="atm-pager">
<ul>
<li>
<a href="#">
<i class="atm-icon far fa-chevron-left "></i>
</a>
</li>
<li>
<a class="" href="#">
1
</a>
</li>
<li>
<a class="" href="#">
2
</a>
</li>
<li>
<a class="active" href="#">
3
</a>
</li>
<li>
<a class="" href="#">
4
</a>
</li>
<li>
<a class="" href="#">
5
</a>
</li>
<li>
<a class="" href="#">
6
</a>
</li>
<li>
<a href="#">
<i class="atm-icon far fa-chevron-right "></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
{{render '@breadcrumbs'}}
<div class="tpl-blog-overview">
{{render '@content-header'}}
<div class="vebego-container">
{{#if blog-highlight}}
<div class="blog-overview-highlights">
<div class="title-wrap">
{{render '@tag-bubble'}}
{{render '@inline-search'}}
</div>
<div class="wrapper">
{{#each blog-highlight}}
<div>
{{render '@card-extended--news'}}
</div>
{{/each}}
</div>
</div>
{{/if}}
<div class="blog-overview-highlights">
<div class="wrapper">
{{#each blog-list}}
<div>
{{render '@card-extended--news'}}
</div>
{{/each}}
</div>
{{render '@pager'}}
</div>
</div>
</div>
{
"title": {
"heading": {
"text": "Verhalen van de werkvloer"
},
"subtitle": {
"text": "Aanraders"
},
"underline": false
},
"blog-highlight": [
{},
{}
],
"blog-list": [
{},
{},
{}
]
}
.tpl-blog-overview {
@apply pt-6;
.org-content-header {
@apply mb-24;
}
.blog-overview-intro {
@apply mb-24;
.atm-heading {
@apply text-secondary-col-1;
}
.atm-paragraph p {
@apply mb-0 text-md leading-6;
}
}
.mol-inline-search {
@apply mb-3;
}
.atm-tag {
@apply mb-3;
}
.blog-overview-list {
.title-wrap {
@apply mb-14;
@apply md:flex items-start justify-between md:flex-row-reverse;
}
.wrapper {
@apply grid lg:grid-cols-2;
@apply gap-16;
}
.atm-pager {
@apply mt-10;
}
.blog-list-wrapper {
@apply grid;
@apply grid-cols-12;
@apply gap-8 xl:gap-16;
.blog-list-cards {
@apply col-span-12 lg:col-span-6;
}
}
}
}
No notes defined.