<section class="org-blog-teasers">
<div class="vebego-container">
<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">Verhalen van de werkvloer</span>
</div>
<div class="wrapper">
<div class="first">
<div class="atm-paragraph text-md">Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland.</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="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="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>
<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="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>
<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="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>
</div>
</section>
<section class="org-blog-teasers">
<div class="vebego-container">
{{render '@title' title merge=true}}
<div class="wrapper">
<div class="first">
{{ render '@paragraph' paragraph merge=true}}
{{#each buttonsPrimary}}
{{render '@button-primary' this merge=true}}
{{/each}}
{{#each buttonsSecondary}}
{{render '@button-secondary' this merge=true}}
{{/each}}
</div>
{{#each blog}}
<div>
{{ render '@card-extended' merge=true }}
</div>
{{/each}}
</div>
</div>
</section>
{
"title": {
"heading": {
"text": "Verhalen van de werkvloer"
}
},
"blog": [
{},
{},
{}
],
"paragraph": {
"text": "Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland."
},
"buttonsPrimary": [
{
"text": "Button 1"
}
],
"buttonsSecondary": [
{
"text": "Button 2"
},
{
"text": "Button 3"
}
]
}
.org-blog-teasers
{
.mol-title
{
@apply mb-8;
}
.first .atm-paragraph
{
@apply mb-8;
@apply lg:w-4/5;
}
.wrapper
{
@apply grid;
@apply grid-cols-1;
@apply md:grid-cols-2;
@apply lg:grid-cols-4;
@apply gap-8;
}
}
No notes defined.