<div class='tpl-standard-page bg-gray-300' 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='lg:grid grid-cols-12 gap-12'>
<div class='col-span-3'>
<div class="inpage-nav">
<span>
Bekijk de inhoud van deze pagina
</span>
<div class="inpage-nav-inner">
<ul class="">
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Bachelor</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Master</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Voor wie?</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</li>
</ul>
<a class="button button-black ">
<span>
<span class="text">
Direct inschrijven?
</span>
</span>
</a>
</div>
</div>
<div class="dropdown-nav">
<details>
<summary>
<div class="wrapper">
<div>
Bekijk de inhoud van deze pagina
</div>
<span class="icon fal fa-angle-down fa-lg icon-open" aria-hidden="true"></span>
<span class="icon fal fa-angle-up fa-lg icon-close" aria-hidden="true"></span>
</div>
</summary>
<div class="dropdown-content">
<a href="#" class="link " aria-label="" title="">
<span class="text">Bachelor</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Master</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Voor wie?</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</div>
</details>
</div>
</div>
<div class='col-span-9 has-sidenav'>
<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>
<div class='tpl-standard-page bg-gray-300' data-sticky-container>
{{render '@alert-popup'}}
{{render '@content-header'}}
<div class='py-12'>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-12'>
<div class='col-span-3'>
{{render '@inpage-nav'}}
</div>
<div class='col-span-9 has-sidenav'>
<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>
</div>
/* No context defined. */
.tpl-standard-page,
.dt-standardpage {
@apply bg-gray-300 pb-12;
.paragraph {
h3.heading,
.heading.h3 {
@apply text-red;
}
}
.filter-list {
@apply mb-28;
}
}
No notes defined.