<section class='org-text-block'>
<div class='vebego-container'>
<h1 class="atm-heading ">Relevant voor jou</h1>
<div class='org-text-block-wrapper'>
<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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
<h1 class="atm-heading ">Relevant voor jou</h1>
<div class='org-text-block-wrapper'>
<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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
<h1 class="atm-heading ">Relevant voor jou</h1>
<div class='org-text-block-wrapper'>
<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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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 no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 1</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 2</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button 3</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
{{render "@heading" heading}}
<div class='org-text-block-wrapper'>
{{#each cards}}
<div class='col-span-4'>
{{render '@card-simple' merge=true}}
</div>
{{/each}}
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
{{render "@heading" heading}}
<div class='org-text-block-wrapper'>
{{#each cards}}
<div class='col-span-6'>
{{render '@card-simple' merge=true}}
</div>
{{/each}}
</div>
</div>
</section>
<section class='org-text-block'>
<div class='vebego-container'>
{{render "@heading" heading}}
<div class='org-text-block-wrapper'>
{{#each cards}}
<div class='col-start-3 col-span-8'>
{{render '@card-simple' merge=true}}
</div>
{{/each}}
</div>
</div>
</section>
{
"heading": {
"text": "Relevant voor jou",
"tag": "h1"
},
"title": {
"underline": false
},
"cards": [
{},
{},
{}
]
}
.org-text-block {
.atm-heading {
@apply text-secondary-col-1 mb-4;
}
.org-text-block-wrapper {
@apply flex flex-col xl:grid gap-10;
@screen xl {
grid-template-columns: repeat(12, 1fr);
}
.atm-image {
@apply h-full;
img {
@apply object-contain;
}
}
.atm-paragraph {
p {
@apply mb-0;
}
}
}
}
No notes defined.