<div class='tpl-news-overview'>
<div class='vebego-container'>
<section class="org-content-header">
<div class="vebego-container">
<div class="content-header-text">
<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="reading-time">
<span class="atm-icon far fa-eye fa-sm "></span>
<span class="text">8 minuten</span>
</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-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1170/380" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/700" alt="" loading="lazy">
</picture>
</div>
</div>
</section>
<div class='news-overview-list'>
<div class='left'>
<div class='news-list-wrapper'>
<div class='news-list-cards'>
<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>
<span class="date">20-04-2021</span>
</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='news-list-cards'>
<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>
<span class="date">20-04-2021</span>
</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='news-list-cards'>
<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>
<span class="date">20-04-2021</span>
</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='news-list-cards'>
<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>
<span class="date">20-04-2021</span>
</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="#">
<span class="atm-icon far fa-chevron-left "></span>
</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="#">
<span class="atm-icon far fa-chevron-right "></span>
</a>
</li>
</ul>
</div>
</div>
<div class='right'>
<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>
<span class="atm-icon form-input-error-icon far fa-times "></span>
<span class="atm-icon form-input-valid-icon far fa-check "></span>
</div>
<button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
<span class="button-content">
<span class="atm-icon far fa-search fa-lg fa-fw"></span>
</span>
</button>
</form>
</div>
<h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>
<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
<span class="atm-icon fal fa-times "></span>
</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-newsletter-subscribe">
<span class="atm-heading h5">Schrijf je in voor onze nieuwsbrief voor meer verhalen</span>
<div class="wrapper">
<div class="atm-form-input ">
<input class="form-input" type="text" id="input" name="input">
<label class="atm-form-label form-label " for="input">E-mailadres</label>
<span class="atm-icon form-input-error-icon far fa-times "></span>
<span class="atm-icon form-input-valid-icon far fa-check "></span>
</div>
<a class="atm-button atm-button-primary button-md button-icon-only ">
<span class="button-content">
<span class="atm-icon fal fa-long-arrow-right fa-lg fa-fw"></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='tpl-news-overview'>
<div class='vebego-container'>
{{render '@content-header'}}
<div class='news-overview-list'>
<div class='left'>
<div class='news-list-wrapper'>
{{#each news-list}}
<div class='news-list-cards'>
{{render '@card-extended--news'}}
</div>
{{/each}}
</div>
{{render '@pager'}}
</div>
<div class='right'>
{{render '@inline-search'}}
{{render '@heading--h5'}}
{{render '@tag-bubble'}}
{{render '@newsletter-subscribe'}}
</div>
</div>
</div>
</div>
{
"news-list": [
{},
{},
{},
{}
]
}
.tpl-news-overview {
.news-overview-list {
@apply grid;
@apply lg:grid-cols-12;
@apply lg:gap-16;
@apply mt-10 lg:mt-20 mb-20;
.left {
@apply order-2;
@apply lg:order-1;
@apply lg:col-span-8;
.news-list-wrapper {
@apply grid;
@apply grid-cols-12;
@apply gap-8 xl:gap-16;
.news-list-cards {
@apply col-span-12 lg:col-span-6;
}
.news-list-banner {
@apply col-span-12;
}
}
.atm-pager {
@apply mt-10;
}
}
.right {
@apply order-1 lg:order-2;
@apply lg:col-span-4;
.mol-inline-search {
@apply mb-12;
}
.mol-tag-bubble {
@apply mb-12;
}
.mol-newsletter-subscribe {
@apply hidden lg:block;
@apply mb-12;
}
}
}
}
No notes defined.