<div class="tpl-initiative-page">
<div class="vebego-container">
<div class="initiative-page-content">
<div class="image">
<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>
</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>
<section class="org-sdg-block">
<div class="vebego-container">
<div class="mol-title ">
<div class="atm-heading h4">Toegepaste SDG’s</div>
</div>
</div>
<div class="wrapper-sdg">
<a href="#" title="" aria-label="" target="">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
</picture>
</a>
<a href="#" title="" aria-label="" target="">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
</picture>
</a>
</div>
</section>
</div>
<div class="content">
<div class="mol-tag-bubble">
<div class="atm-tag " title="This is a tag link" href="#">
<span>
Initiatief
</span>
</div>
</div>
<div class="mol-title ">
<span class="atm-heading h1">Betekenisvol Werk</span>
</div>
<div class="atm-paragraph text-lg">
<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>
<h3 class="atm-heading ">The quick brown fox jumps over the lazy dog</h3>
<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>
<br>
<div class="atm-video">
<iframe src="https://www.youtube.com/embed/L6LsRTfQGDo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<br><br>
<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>
<section class="org-sdg-block">
<div class="vebego-container">
<div class="mol-title ">
<div class="atm-heading h4">Toegepaste SDG’s</div>
</div>
</div>
<div class="wrapper-sdg">
<a href="#" title="" aria-label="" target="">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
</picture>
</a>
<a href="#" title="" aria-label="" target="">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
</picture>
</a>
</div>
</section>
</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="initiative-relevant">
<div class="mol-title title-underline">
<span class="atm-heading h1">Meer initiatieven</span>
</div>
<div class="wrapper">
<div>
<div class="mol-card-extended sdg 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="wrap-sdg">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
</picture>
</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 sdg 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="wrap-sdg">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
</picture>
</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 sdg 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="wrap-sdg">
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
</picture>
<picture class="atm-image ">
<img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
</picture>
</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-initiative-page">
<div class="vebego-container">
<div class="initiative-page-content">
<div class="image">
{{render '@image'}}
</div>
<div class="contact">
{{render '@contact-block'}}
{{render '@sdg-block' sdg-block merge=true}}
</div>
<div class="content">
{{render '@tag-bubble' tag-bubble merge=true}}
{{render '@title' title merge=true}}
{{render '@paragraph--large'}}
{{render '@heading--h3'}}
{{render '@paragraph'}}
<br>
{{render '@video'}}
<br><br>
{{render '@paragraph'}}
{{render '@sdg-block' sdg-block merge=true}}
</div>
<div class="social">
{{render '@social-media--vertical'}}
{{render '@social-media--vertical-xs'}}
</div>
</div>
<div class="initiative-relevant">
{{render '@title' title-relevant merge=true}}
<div class="wrapper">
{{#each blog}}
<div>
{{render '@card-extended--sdg'}}
</div>
{{/each}}
</div>
</div>
</div>
</div>
{
"tag-bubble": {
"tags": [
{
"text": "Initiatief",
"element": "div"
}
]
},
"title": {
"heading": {
"text": "Betekenisvol Werk"
},
"subtitle": false,
"underline": false
},
"title-relevant": {
"heading": {
"text": "Meer initiatieven"
},
"subtitle": false
},
"blog": [
{},
{},
{}
],
"sdg-block": {
"title": {
"heading": {
"text": "Toegepaste SDG’s",
"tag": "div",
"modifier": "h4"
},
"subtitle": false,
"underline": false
},
"sdg": [
{
"href": "#",
"title": "",
"aria-label": "",
"target": "",
"sdg-image": {
"src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg"
}
},
{
"href": "#",
"title": "",
"aria-label": "",
"target": "",
"sdg-image": {
"src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg"
}
}
]
}
}
.tpl-initiative-page {
.initiative-page-content {
@apply mb-24;
@apply relative;
@apply grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 280px 100px minmax(0, 1fr);
@screen md {
grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
grid-template-rows: 210px 100px minmax(0, 1fr);
}
@screen lg {
grid-template-columns: 0.6fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
grid-template-rows: 300px 160px minmax(0, 1fr);
}
.image {
grid-area: 1 / 1 / 3 / 3;
@apply md:overflow-hidden;
@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-4;
@apply md:mx-0;
@apply bg-white;
@apply p-12;
@apply block;
@screen md {
grid-area: 2 / 2 / 4 / 4;
}
.mol-tag-bubble {
@apply text-center;
}
.mol-title {
@apply md:text-center;
@apply mb-10;
}
.org-sdg-block {
@apply mt-8;
@apply lg:hidden;
.mol-title {
@apply mb-8;
@apply text-left;
}
}
}
.contact {
@apply hidden;
@apply lg:block;
grid-area: 2 / 1 / 4 / 2;
.org-sdg-block {
@apply pt-8 pr-8 max-w-[250px];
@apply bg-white;
.mol-title {
@apply mb-8;
@apply text-left;
}
}
}
}
.initiative-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;
}
}
}
No notes defined.