<section class="org-hero fullwidth ">
<div class="hero-right">
<div class="hero-right-wrapper ">
<svg class="hero-path-mask" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1921.38 1053.3">
<path d="M.69,830.4s297.33,128.71,722.76,189.75c18.17,2.61,185.27,21.08,185.27,21.08,306.97,25.68,660.88,8.63,1010.78-110.32" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;" />
<path d="M634.81,1.4s532.18,394.01,1126.06,417.19c0,0,86.69-92.71,159.04-208.6" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;" />
</svg>
<div class="hero-right-variant">
<div class="play-video-wrapper">
<a data-fslightbox href="https://www.youtube.com/embed/L6LsRTfQGDo">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="48" stroke="url(#gradient)" stroke-width="5" stroke-linecap="round" />
<defs>
<radialGradient id="gradient" cx="1" cy="1" r="1.5">
<stop offset="0%" stop-color="#F69915" />
<stop offset="100%" stop-color="#990D7F" />
</radialGradient>
</defs>
</svg>
<i class="atm-icon far fa-external-link "></i>
</a>
</div>
</div>
</div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/250/768/432" alt="">
</picture>
<a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</section>
<div class='tpl-campaignpage'>
<div class="content-block">
<div class="org-headline-block">
<div class="vebego-container">
<h2 class="atm-heading ">The quick brown fox jumps over the lazy dog</h2>
<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 icon-right ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</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>Lees de klantcase</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</div>
</div>
<div class="content-block">
<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>
</div>
<div class="content-block">
<section class="org-video-block">
<div class="vebego-container">
<div class="wrapper">
<h2 class="atm-heading ">Relevant voor jou</h2>
<div class="mol-video-player">
<div class="video-player-video">
<div class="thumbnail">
<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>
<button class="atm-play " title="Bekijk film">
<i class="atm-icon fal fa-play-circle fa-md "></i>
<span class="text">
Bekijk film
</span>
</button>
</div>
<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>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
{{render '@hero--fullwidth-video'}}
<div class='tpl-campaignpage'>
<div class="content-block">
{{render '@headline-block'}}
</div>
<div class="content-block">
{{render "@contact-block"}}
</div>
<div class="content-block">
{{render '@video-block'}}
</div>
</div>
/* No context defined. */
.tpl-campaignpage {
@apply pt-16;
}
No notes defined.