<div class='tpl-agenda-detail' data-sticky-container>
<section class="content-header red hasimage ">
<div class="uhasselt-container">
<div class="column has-image">
<nav class="mol-breadcrumbs">
<ol>
<li>
<a class="link " aria-label="" title="">
<span class="text">Home</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a class="link " aria-label="" title="">
<span class="text">Level 1</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a class="link " aria-label="" title="">
<span class="text">Level 2</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
Current page
</li>
</ol>
</nav>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<div class='paragraph paragraph-intro'>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<div class="button-wrap">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
<a href="#" class="button button-white-border ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="wrap-image">
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/960/640" alt="Test" loading="lazy">
</picture>
<span class="triangle1"></span>
</div>
</section>
<div class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-12'>
<div class='col-span-12'>
<div class='extra-agenda-info'>
<div class='info-row'>
<span class="icon far fa-external-link " aria-hidden="true"></span>
<span class='text'>Tekst</span>
</div>
<div class='info-row'>
<span class="icon far fa-external-link " aria-hidden="true"></span>
<span class='text'>Tekst</span>
</div>
<div class='info-row'>
<span class="icon far fa-external-link " aria-hidden="true"></span>
<span class='text'>Tekst</span>
</div>
<div class='info-row'>
<span class="icon far fa-external-link " aria-hidden="true"></span>
<span class='text'>Tekst</span>
</div>
</div>
<div class="org-multi-column-block">
<div class="uhasselt-container">
<div class="column column-var">
<div class="col-span-3">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-span-9">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
<div class="column column-var">
<div class="col-span-4">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-span-8">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
<div class="column column-2">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
</div>
<div class="column column-3">
<div class="quote">
<div class="quote-inner">
<div class="text h3">Het is een erkenning voor ons onderzoeksteam dat zich al jaren inzet om de effecten van omgevingsfactoren op onze gezondheid in kaart te brengen.</div>
<div class="person h4">Prof. dr. Tim Nawrot</div>
</div>
<span class="icon fas fa-quote-right " aria-hidden="true"></span>
</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
<div class="column column-4">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
</div>
</div>
</div>
<ul class="social horizontal">
<li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook fa-lg " aria-hidden="true"></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram fa-lg " aria-hidden="true"></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter fa-lg " aria-hidden="true"></span></a></li>
<li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube fa-lg " aria-hidden="true"></span></a></li>
<li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin fa-lg " aria-hidden="true"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class='tpl-agenda-detail' data-sticky-container>
{{render '@content-header'}}
<div class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-12'>
<div class='col-span-12'>
<div class='extra-agenda-info'>
<div class='info-row'>
{{render '@icon'}}
<span class='text'>Tekst</span>
</div>
<div class='info-row'>
{{render '@icon'}}
<span class='text'>Tekst</span>
</div>
<div class='info-row'>
{{render '@icon'}}
<span class='text'>Tekst</span>
</div>
<div class='info-row'>
{{render '@icon'}}
<span class='text'>Tekst</span>
</div>
</div>
{{render '@multi-column-block'}}
{{render '@social'}}
</div>
</div>
</div>
</div>
</div>
{
"contact-title": {
"modifier": "contact-title"
},
"back-overview": {
"modifier": "back-overview"
}
}
.tpl-agenda-detail {
.paragraph {
h3.heading,
.heading.h3 {
@apply text-red;
}
}
.extra-agenda-info {
@apply pb-12;
@apply flex flex-wrap flex-col lg:flex-row gap-1 lg:gap-8;
.info-row {
@apply flex items-center;
.icon {
@apply mr-2;
}
}
}
}
No notes defined.