<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">
<section class="org-contact-block">
<div class="vebego-container">
<h2 class="atm-heading secondary-color">Contact block</h2>
<div class="org-contact-block--wrapper">
<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 class="org-contact-block--content">
<h1 class="atm-heading secondary-color">Martina Musterman</h1>
<h4 class="atm-heading ">Head of Facility Management</h4>
<div class="atm-tag " title="This is a tag link" href="#">
<span>
Standort Wuppertal
</span>
</div>
<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>Telefonischer kontakt</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>E-Mail kontakt</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</section>
<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"> <i class="atm-icon fa-brands fa-facebook-f fa-lg "></i>
</a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon fa-brands fa-instagram fa-lg "></i>
</a></li>
<li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon fa-brands fa-x-twitter fa-lg "></i>
</a></li>
<li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon fa-brands fa-youtube fa-lg "></i>
</a></li>
<li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon fa-brands fa-linkedin-in fa-lg "></i>
</a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"> <i class="atm-icon fa-brands fa-whatsapp fa-lg "></i>
</a></li>
</ul>
<ul class="mol-social-media vertical xs">
<li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="atm-icon fa-brands fa-facebook-f fa-xs "></i>
</a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon fa-brands fa-instagram fa-xs "></i>
</a></li>
<li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon fa-brands fa-x-twitter fa-lg "></i>
</a></li>
<li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon fa-brands fa-youtube fa-xs "></i>
</a></li>
<li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon fa-brands fa-linkedin-in fa-xs "></i>
</a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"> <i class="atm-icon fa-brands fa-whatsapp fa-xs "></i>
</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="grid grid-cols-2">
</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="grid grid-cols-2">
</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="grid grid-cols-2">
</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 {
@apply pt-[8.5rem] overflow-hidden;
.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.