<div class='intranet-vacatures'>
<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 class='flex'>
<div class='pl-8 mr-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">
Vacatures
</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>
<p class="search-filter-small-copy">(32)</p>
</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>
<p class="search-filter-small-copy">(32)</p>
</div>
</div>
</details>
</form>
</div>
</div>
<div class='w-full'>
<div class='paragraph '>Er zijn <strong>46</strong> opleidingen gevonden.</div>
<div class='w-full bg-white p-8 shadow-lg mt-8'>
<div class='w-full'>
<div class="link-block js--clickable">
<div class="wrapper-link-block">
<div class="title-wrap">
<h2 class="heading ">
Administratief medewerker contractbeheer
</h2>
</div>
<div class="link-block-percentage">
<div class="link-block-percentage-text">
Bijzonder academisch personeel (BAP)
</div>
<div class="link-block-percentage-number">
100%
</div>
</div>
<div class="link-block-record-bold">
Uiterste sollicitatiedatum: 25/11/2019
</div>
<div class="link-block-actions">
<a href="#" class="button button-red ">
<span>
<span class="text">
Meer info en solliciteren
</span>
</span>
</a>
</div>
</div>
<a href="#" class="link-block-iconlink js--main-link">
<span class="icon fal fa-chevron-right fa-lg " aria-hidden="true"></span>
</a>
</div>
</div>
<div class='w-full'>
<div class="link-block js--clickable">
<div class="wrapper-link-block">
<div class="title-wrap">
<h2 class="heading ">
Administratief medewerker contractbeheer
</h2>
</div>
<div class="link-block-percentage">
<div class="link-block-percentage-text">
Bijzonder academisch personeel (BAP)
</div>
<div class="link-block-percentage-number">
100%
</div>
</div>
<div class="link-block-record-bold">
Uiterste sollicitatiedatum: 25/11/2019
</div>
<div class="link-block-actions">
<a href="#" class="button button-red ">
<span>
<span class="text">
Meer info en solliciteren
</span>
</span>
</a>
</div>
</div>
<a href="#" class="link-block-iconlink js--main-link">
<span class="icon fal fa-chevron-right fa-lg " aria-hidden="true"></span>
</a>
</div>
</div>
<div class='w-full'>
<div class="link-block js--clickable">
<div class="wrapper-link-block">
<div class="title-wrap">
<h2 class="heading ">
Administratief medewerker contractbeheer
</h2>
</div>
<div class="link-block-percentage">
<div class="link-block-percentage-text">
Bijzonder academisch personeel (BAP)
</div>
<div class="link-block-percentage-number">
100%
</div>
</div>
<div class="link-block-record-bold">
Uiterste sollicitatiedatum: 25/11/2019
</div>
<div class="link-block-actions">
<a href="#" class="button button-red ">
<span>
<span class="text">
Meer info en solliciteren
</span>
</span>
</a>
</div>
</div>
<a href="#" class="link-block-iconlink js--main-link">
<span class="icon fal fa-chevron-right fa-lg " aria-hidden="true"></span>
</a>
</div>
</div>
<div class='w-full'>
<div class="link-block js--clickable">
<div class="wrapper-link-block">
<div class="title-wrap">
<h2 class="heading ">
Administratief medewerker contractbeheer
</h2>
</div>
<div class="link-block-percentage">
<div class="link-block-percentage-text">
Bijzonder academisch personeel (BAP)
</div>
<div class="link-block-percentage-number">
100%
</div>
</div>
<div class="link-block-record-bold">
Uiterste sollicitatiedatum: 25/11/2019
</div>
<div class="link-block-actions">
<a href="#" class="button button-red ">
<span>
<span class="text">
Meer info en solliciteren
</span>
</span>
</a>
</div>
</div>
<a href="#" class="link-block-iconlink js--main-link">
<span class="icon fal fa-chevron-right fa-lg " aria-hidden="true"></span>
</a>
</div>
</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>
</div>
</section>
<section class='py-12 bg-white'>
<div class='uhasselt-container'>
<div class='flex flex-wrap justify-center'>
<div class='p-4 m-4 usp-list-container'>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<div class="usp-list white">
<ul class="fa-ul">
<li><span class="fa-li"><span class="icon fal fa-check " aria-hidden="true"></span></span>A USP for UHasselt</li>
<li><span class="fa-li"><span class="icon fal fa-check " aria-hidden="true"></span></span>Another USP for UHasselt</li>
<li><span class="fa-li"><span class="icon fal fa-check " aria-hidden="true"></span></span>And a third USP for UHasselt</li>
</ul>
</div>
</div>
<div class='p-4 m-4'>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<div class="link-list transparent">
<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>
<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>
<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>
<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>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<div class='intranet-vacatures'>
{{render '@content-header--content-header-intranet-white' content-header}}
<section class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='flex'>
<div class='pl-8 mr-8 sm:block hidden'>
<div class='mb-8'>
{{render '@heading--h2' this.heading-filter}}
</div>
{{render '@search-filter--filter-thema-single-block'}}
</div>
<div class='w-full'>
{{render '@paragraph' this.paragraph}}
<div class='w-full bg-white p-8 shadow-lg mt-8'>
{{#each vacatures as |vacature|}}
<div class='w-full'>
{{render '@link-block--job-offer'}}
</div>
{{/each}}
{{render '@pager'}}
</div>
</div>
</div>
</div>
</section>
<section class='py-12 bg-white'>
<div class='uhasselt-container'>
<div class='flex flex-wrap justify-center'>
<div class='p-4 m-4 usp-list-container'>
{{render '@heading--h3'}}
{{render '@usp-list--usp-list-white'}}
</div>
<div class='p-4 m-4'>
{{render '@heading--h3'}}
{{render '@link-list--link-list-clear'}}
</div>
</div>
</div>
</section>
</div>
{
"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
}
},
"vacatures": [
{},
{},
{},
{}
],
"heading-filter": {
"text": "Filter",
"tag": "h2"
},
"paragraph": {
"text": "Er zijn <strong>46</strong> opleidingen gevonden.",
"modifier": "",
"isRichText": true
}
}
.intranet-vacatures {
.usp-list-container {
.usp-list {
padding: 0;
}
}
}
No notes defined.