<section class="content-header ">
<div class="uhasselt-container">
<div class="column ">
<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">
</div>
</div>
</div>
</section>
<section class='py-12'>
<div class='uhasselt-container'>
<div class='flex sm:-ml-8'>
<div class='w-full lg:w-1/2 xl:w-2/3 pl-8 sm:block hidden'>
<div class="mb-8">
<h2 class="heading ">
Filter
</h2>
</div>
<div id="search-filter-desktop">
<form class="search-filter-desktop-form">
<details class="search-filter-category" open>
<summary class="search-filter-heading">
<h4 class="heading text-red">
Thema's die je volgt
</h4>
<div class="search-filter-toggle">
<span class="icon far fa-chevron-down icon-down" aria-hidden="true"></span>
<span class="icon far fa-chevron-up icon-up" aria-hidden="true"></span>
</div>
</summary>
<div class="search-filter-desktop-items">
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb1" name="cb1">
<label class="form-label " for="cb1">
Item 1
</label>
</div>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-1' name='replace-name-with-backend-1' value='replace-value-with-backend-1' checked />
<label for='replace-id-with-backend-1' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-1' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
</label>
</div>
</div>
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb2" name="cb2">
<label class="form-label " for="cb2">
Item 2
</label>
</div>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-2' name='replace-name-with-backend-2' value='replace-value-with-backend-2' checked />
<label for='replace-id-with-backend-2' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-2' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
</label>
</div>
</div>
</div>
</details>
<details class="search-filter-category" open>
<summary class="search-filter-heading">
<h4 class="heading text-red">
Thema
</h4>
<div class="search-filter-toggle">
<span class="icon far fa-chevron-down icon-down" aria-hidden="true"></span>
<span class="icon far fa-chevron-up icon-up" aria-hidden="true"></span>
</div>
</summary>
<div class="search-filter-desktop-items">
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb1" name="cb1">
<label class="form-label " for="cb1">
Item 1
</label>
</div>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-3' name='replace-name-with-backend-3' value='replace-value-with-backend-3' />
<label for='replace-id-with-backend-3' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-3' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
</label>
</div>
</div>
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb2" name="cb2">
<label class="form-label " for="cb2">
Item 2
</label>
</div>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-4' name='replace-name-with-backend-4' value='replace-value-with-backend-4' />
<label for='replace-id-with-backend-4' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-4' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
</label>
</div>
</div>
</div>
</details>
</form>
</div>
</div>
<div class="sm:ml-24">
<div class="text-red mb-8">
<h1 class="heading ">
Highlights
</h1>
</div>
<div class="grid xl:grid-cols-3 gap-4 lg:grid-cols-2 grid-cols-1">
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
</div>
<div class="my-8">
<h1 class="heading ">
Recent nieuws
</h1>
</div>
<div class="grid xl:grid-cols-3 gap-4 lg:grid-cols-2 grid-cols-1">
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
<article class='article-card'>
<div class='article-card-wrap-image'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
</picture>
</div>
<div class='article-card-content'>
<div class='article-card-tags'>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<p class='article-card-content-date'>8 April</p>
</div>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">This is what a link looks like</span>
</a>
</div>
</article>
</div>
<ul class="pager">
<li>
<a href="#">
<span class="icon fal fa-long-arrow-left " aria-hidden="true"></span>
Vorige
</a>
</li>
<li class="">
<a href="#">
1
</a>
</li>
<li class="">
<a href="#">
2
</a>
</li>
<li class="active">
<a href="#">
3
</a>
</li>
<li class="">
<a href="#">
4
</a>
</li>
<li class="">
<a href="#">
5
</a>
</li>
<li class="">
<a href="#">
6
</a>
</li>
<li>
<a href="#">
Volgende
<span class="icon fal fa-long-arrow-right " aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
{{render '@content-header--content-header-white-noimg' content-header}}
<section class='py-12'>
<div class='uhasselt-container'>
<div class='flex sm:-ml-8'>
<div
class='w-full lg:w-1/2 xl:w-2/3 pl-8 sm:block hidden'
>
<div class="mb-8">
{{render '@heading--h2' this.heading-filter}}
</div>
{{render '@search-filter--filter-thema'}}
</div>
<div class="sm:ml-24">
<div class="text-red mb-8">
{{render '@heading--h1' this.heading-articles}}
</div>
<div class="grid xl:grid-cols-3 gap-4 lg:grid-cols-2 grid-cols-1">
{{#each articles as |article|}}
{{render '@article-card'}}
{{/each}}
</div>
<div class="my-8">
{{render '@heading--h1' this.heading-articles-recent}}
</div>
<div class="grid xl:grid-cols-3 gap-4 lg:grid-cols-2 grid-cols-1">
{{#each articles-recent as |article-recent|}}
{{render '@article-card'}}
{{/each}}
</div>
{{render '@pager'}}
</div>
</div>
</div>
</section>
{
"content-header": {
"modifier": "",
"image": false,
"paragraph": true,
"btn-red": false,
"btn-white": false,
"btn-black": false,
"btn-white-border": false
},
"articles": [
{},
{},
{}
],
"articles-recent": [
{},
{},
{},
{},
{},
{}
],
"heading-filter": {
"text": "Filter",
"tag": "h2"
},
"heading-articles": {
"text": "Highlights",
"tag": "h1"
},
"heading-articles-recent": {
"text": "Recent nieuws",
"tag": "h1"
}
}
No notes defined.