<section class="content-header 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="toggle-button-wrap">
<div class="button-wrap-button">
<div class='toggle-button'>
<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' />
<label for='replace-id-with-backend-2' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
<span class="label-text">Toegevoegd aan favorieten</span>
</label>
<label for='replace-id-with-backend-2' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
<span class="label-text">Voeg toe aan favorieten</span>
</label>
</div>
</div>
<div class="button-wrap-button">
<div class='toggle-button'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-12' name='replace-name-with-backend-12' value='replace-value-with-backend-12' />
<label for='replace-id-with-backend-12' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
<span class="label-text">Op de hoogte</span>
</label>
<label for='replace-id-with-backend-12' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
<span class="label-text">Blijf op de hoogte</span>
</label>
</div>
</div>
</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>
<section class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div>
<div class='my-8 grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'>
<div class="link-list white-red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
</div>
<div class="link-list white-red">
<div class="link-list-header header-tag">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<div class="link-list-header-tag">
<span class="tag tag-sm tag-red tag-round tag-sm">
This is a tag
</span>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
<div class="link-list-bottom-link button-link-margin">
<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>
</div>
<div class="link-list white-red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
</div>
<div class="link-list white-red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
</div>
<div class="link-list white-red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
</div>
<div class="link-list white-red">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<div class="link-bottom-line"></div>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class='py-12 bg-white'>
<div class='uhasselt-container pt-8'>
<h2 class="heading ">
Relevante nieuws artikels
</h2>
<div class='flex flex-wrap'>
<div class='my-8 grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md: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>
</div>
</div>
</section>
{{render '@content-header--content-header-intranet-white' content-header}}
<section class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div>
<div class='my-8 grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'>
{{render '@link-list--link-list-white-no-button'}}
{{render '@link-list--link-list-white-tag'}}
{{#each link-lists as |linklist|}}
{{render '@link-list--link-list-white-no-button'}}
{{/each}}
</div>
</div>
</div>
</section>
<section class='py-12 bg-white'>
<div class='uhasselt-container pt-8'>
{{render '@heading' this.heading}}
<div class='flex flex-wrap'>
<div class='my-8 grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'>
{{#each events as |event|}}
{{render '@article-card'}}
{{/each}}
</div>
</div>
</div>
</section>
{
"content-header": {
"modifier": "",
"image": {
"modifier": "",
"imageModifier": "",
"lazy": true,
"alt": "Test",
"src": "https://picsum.photos/id/239/960/640"
},
"paragraph": true,
"toggle-btn": true,
"information": false,
"intranet-header": true,
"button": {
"id": "replace-id-with-backend-12",
"name": "replace-name-with-backend-12",
"value": "replace-value-with-backend-12",
"active-text": "Blijf op de hoogte",
"text": "Op de hoogte",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-bell"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-bell"
}
},
"checked": false,
"disabled": false
}
},
"events": [
{},
{},
{},
{},
{},
{}
],
"link-lists": [
{},
{},
{},
{}
],
"heading": {
"text": "Relevante nieuws artikels",
"tag": "h2"
}
}
No notes defined.