<div class='tpl-standard-page' data-sticky-container>
<div class="wrapper-alert">
<div class="alert-popup red js--clickable">
<a href="#" class="close"><span class="icon fal fa-times fa-2x " aria-hidden="true"></span></a>
<div class="uhasselt-container">
<span class="icon fal fa-exclamation-triangle fa-lg " aria-hidden="true"></span>
<span class="text">
<h6 class="heading ">
This is the alert title
</h6>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
</div>
</span>
<a href="https://www.google.nl" class="js--main-link">
<span class="icon fal fa-chevron-right fa-lg " aria-hidden="true"></span>
</a>
</div>
<picture class="picture ">
<img class="picture-image " src="//placehold.co/480x264" alt="">
</picture>
<div class="extra-info">
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
</div>
<div>
<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>
</div>
</div>
</div>
</div>
<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'>
<div class='uhasselt-container'>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-6'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='lg:col-span-6'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-4'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='lg:col-span-4'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='lg:col-span-4'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-3'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='lg:col-span-9'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-4'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='lg:col-span-8'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-8'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='lg:col-span-4'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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>
</div>
</div>
</div>
</div>
</div>
<div class='tpl-standard-page' data-sticky-container>
{{render '@alert-popup'}}
{{render '@content-header'}}
<div class='py-12'>
<div class='uhasselt-container'>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-6'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
<div class='lg:col-span-6'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-4'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
<div class='lg:col-span-4'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
<div class='lg:col-span-4'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-3'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
<div class='lg:col-span-9'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-4'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
<div class='lg:col-span-8'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
<div class='org-multi-column-block'>
<div class='uhasselt-container'>
<div class='column column-var'>
<div class='lg:col-span-8'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
<div class='lg:col-span-4'>
{{render '@heading--h1'}}
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
.tpl-standard-page,
.dt-standardpage {
.paragraph {
h3.heading,
.heading.h3 {
@apply text-red;
}
}
.filter-list {
@apply mb-28;
}
.col-span-9.has-sidenav {
@apply overflow-hidden bg-white shadow-xl p-8;
}
}
No notes defined.