<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='pb-20 bg-white'>
<div class='uhasselt-container'>
<div class="flex items-center intranet-favorieten-heading">
<div class="text-red mr-4 text-lg">
<span class="icon fas fa-heart " aria-hidden="true"></span>
</div>
<h2 class="heading ">
Mijn favorieten
</h2>
</div>
<div class='flex justify-center flex-col'>
<div class='grid gap-4 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1'>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<div class='favorite-card-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<div class='favorite-card-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<div class='favorite-card-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<div class='favorite-card-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<div class='favorite-card-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<div class='favorite-card-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='py-20 bg-gray-300'>
<div class='uhasselt-container'>
<div class="flex items-center intranet-favorieten-heading">
<div class="text-red mr-4 text-lg">
<span class="icon fas fa-browser " aria-hidden="true"></span>
</div>
<h2 class="heading ">
Favoriete applicaties
</h2>
</div>
<div class='flex justify-center flex-col'>
<div class='grid gap-4 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1'>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='favorite-card'>
<a title="Woon -en werkverkeer" href="#" class='favorite-card-first'>
<p class='favorite-card-first-title'>Woon -en werkverkeer</p>
</a>
<div class='favorite-card-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-trash " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='py-20 bg-white'>
<div class='uhasselt-container'>
<div class="mb-8">
<h2 class="heading ">
Misschien ook interessant voor je
</h2>
</div>
<div class='nav-list subnav-cols'>
<ul class='subnav-items subnav-items-favo'>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="link-list transparent">
<ul>
<li class="link-list-li-icon">
<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>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
<label for='replace-id-with-backend' class='icon-checked'>
<span class="icon fas fa-heart " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend' class='icon-unchecked'>
<span class="icon fal fa-heart " aria-hidden="true"></span>
</label>
</div>
</li>
</ul>
</div>
</ul>
</div>
</div>
</section>
{{render '@content-header--content-header-white-noimg' content-header}}
<section class='pb-20 bg-white'>
<div class='uhasselt-container'>
<div class="flex items-center intranet-favorieten-heading">
<div class="text-red mr-4 text-lg">
{{render '@icon' this.icon-first}}
</div>
{{render '@heading--h2' this.heading-first}}
</div>
<div class='flex justify-center flex-col'>
<div
class='grid gap-4 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1'
>
{{#each favorites as |favorite|}}
{{render '@favorite-card'}}
{{/each}}
</div>
</div>
</div>
</section>
<section class='py-20 bg-gray-300'>
<div class='uhasselt-container'>
<div class="flex items-center intranet-favorieten-heading">
<div class="text-red mr-4 text-lg">
{{render '@icon' this.icon-second}}
</div>
{{render '@heading--h2' this.heading-second}}
</div>
<div class='flex justify-center flex-col'>
<div
class='grid gap-4 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1'
>
{{#each favorites as |favorite|}}
{{render '@favorite-card--favorite-card-no-icon'}}
{{/each}}
</div>
</div>
</div>
</section>
<section class='py-20 bg-white'>
<div class='uhasselt-container'>
<div class="mb-8">
{{render '@heading--h2' this.heading-third}}
</div>
{{render '@nav-list--nav-list-favo'}}
</div>
</section>
{
"content-header": {
"modifier": "",
"image": false,
"paragraph": true,
"btn-red": false,
"btn-white": false,
"btn-black": false,
"btn-white-border": false
},
"favorites": [
{},
{},
{},
{},
{},
{}
],
"my-favorites": [
{},
{},
{},
{},
{},
{}
],
"heading-first": {
"text": "Mijn favorieten",
"tag": "h2",
"modifier": ""
},
"heading-second": {
"text": "Favoriete applicaties",
"tag": "h2",
"modifier": ""
},
"heading-third": {
"text": "Misschien ook interessant voor je",
"tag": "h2",
"modifier": ""
},
"icon-first": {
"icon": "fa-heart",
"style": "fas",
"modifier": ""
},
"icon-second": {
"icon": "fa-browser",
"style": "fas",
"modifier": ""
}
}
.intranet-favorieten-heading {
margin-bottom: 2rem;
.heading {
margin: 0;
}
}
No notes defined.