<div class="intranet-vacatures-detail">
<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="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>
</section>
<section class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='lg:flex'>
<div class='card-left-navigation lg:w-1/4'>
<div class="link-list red-simple">
<ul>
<li class="link-list-li">
<a><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>
</a>
</li>
<li class="link-list-li">
<a><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>
</a>
</li>
<li class="link-list-li">
<a><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>
</a>
</li>
<li class="link-list-li">
<a><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>
</a>
</li>
</ul>
</div>
</div>
<div class="lg:w-3/4 content-card-container">
<div class="mb-8">
<div class="content-card-big w-full">
<div class="text-red">
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
</div>
<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>
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non leo vel massa iaculis euismod sit amet eget nibh. Nulla faucibus diam dolor, vel auctor sapien fermentum sed. Phasellus non dolor vel quam tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere lobortis nibh, eget iaculis risus. In eu risus sem. Fusce lacinia gravida tortor. Quisque sed ipsum risus. Nam pellentesque consequat consequat. Curabitur imperdiet ac nibh vel ullamcorper. Etiam bibendum pharetra ultrices. Duis consequat odio vitae vehicula dignissim.
Pellentesque dignissim, magna maximus pulvinar dignissim, magna dui semper purus, ac laoreet ex tellus sit amet sapien. Morbi eu lobortis justo. Cras tristique ut libero vel fermentum. Fusce neque quam, bibendum non malesuada nec, interdum vel turpis. Aenean interdum pulvinar enim ac convallis. Pellentesque rhoncus est a purus semper auctor. Integer faucibus tristique suscipit. Suspendisse eleifend diam ac tellus condimentum lobortis. Aenean sit amet luctus sem. Donec quis justo sem.
</p>
<div class="text-red">
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
</div>
<p class="mb-8">
Donec diam nibh, finibus non volutpat at, lacinia non ipsum. Mauris sem massa, dignissim in tristique at, pharetra ac urna. Donec diam tellus, faucibus quis venenatis malesuada, pretium non urna. Sed et condimentum enim. Morbi vehicula accumsan enim. Praesent eget mattis odio. Nunc eu augue condimentum elit porta bibendum.
Suspendisse interdum blandit libero, nec elementum mi eleifend eu. Nunc ultricies gravida erat ac condimentum. Aliquam placerat nec arcu id luctus. Pellentesque quis sem in magna cursus gravida id sit amet lorem. In a metus viverra, porta magna et, commodo libero. Sed convallis sagittis neque, sit amet convallis dolor imperdiet in. Donec mattis sem at semper dapibus. Proin vel consectetur lectus. Aliquam erat volutpat. Nullam nec sapien a mi rutrum laoreet quis id justo.
</p>
<div class="image-slider">
<div class="image-slider-wrapper">
<div class="swiper-container image-slider-main" data-slides-per-view="1" data-loop="true" data-loop-additional-slides="0">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/231/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/232/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-video">
<iframe src="https://www.youtube.com/embed/D-HIYP7Jo7Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/234/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/235/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/236/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/237/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/238/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/239/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/2/960/540" alt="" />
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-prev">
<a href="#" class="prev-next prev-next-prev">
<span class="icon fal fa-angle-left fa-2x " aria-hidden="true"></span>
</a>
</div>
<div class="swiper-next">
<a href="#" class="prev-next prev-next-next">
<span class="icon fal fa-angle-right fa-2x " aria-hidden="true"></span>
</a>
</div>
</div>
<div class="swiper-container image-slider-thumbs" data-slides-per-view="5" data-loop="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/231/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/232/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="http://i3.ytimg.com/vi/D-HIYP7Jo7Y/maxresdefault.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/234/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/235/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/236/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/237/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/238/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/239/960/540" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/2/960/540" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid lg:grid-cols-2 grid-cols-1 gap-4">
<div class="flex flex-col py-8 w-3/4">
<div class="text-red">
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
</div>
<div class='paragraph '>
<p>
<p>Bellen kan elke werkdag van 8u30 tot 17u, of stuur een email naar <a href="/">test@test.be</a> </p>
</p>
</div>
<div class="block mt-4">
<a href="#" class="button button-red ">
<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="card card-contact small">
<div class="contact-wrapper">
<h2 class="heading title">
Cynthia van Aubel - van der Veen
</h2>
<picture class="picture ">
<img class="picture-image " src="//placehold.co/100x100" alt="">
</picture>
</div>
<div class="information">
<div class="info-wrap">
<div class="contact-label">
<span class="icon fal fa-home fa-fw" aria-hidden="true"></span>
<span class="description">Locatie:</span>
</div>
<span>Hasselt</span>
</div>
<div class="info-wrap">
<div class="contact-label">
<span class="icon fal fa-briefcase fa-fw" aria-hidden="true"></span>
<span class="description">Functie:</span>
</div>
<span>Coördinator</span>
</div>
<div class="info-wrap">
<div class="contact-label">
<span class="icon fal fa-envelope fa-fw" aria-hidden="true"></span>
<span class="description">E-mail:</span>
</div>
<span><a href="mailto:cynthia.vanaubel@uhasselt.be" class="link " aria-label="" title="Cynthia van Aubel - van der Veen">
<span class="text">cynthia.vanaubelvanderveen@uhasselt.be</span>
</a>
</span>
</div>
<div class="info-wrap">
<div class="contact-label">
<span class="icon fal fa-phone-alt fa-fw" aria-hidden="true"></span>
<span class="description">Telefoon:</span>
</div>
<span><a href="tel:003211268173" class="link " aria-label="" title="+32 112 68 173">
<span class="text">+32 112 68 173</span>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="intranet-vacatures-detail">
{{render '@content-header--content-header-intranet-white-noimg' content-header}}
<section class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='lg:flex'>
<div class='card-left-navigation lg:w-1/4'>
{{render '@link-list--link-list-red-simple'}}
</div>
<div class="lg:w-3/4 content-card-container">
<div class="mb-8">
{{render '@content-card-big--vacatures-detail'}}
</div>
<div class="grid lg:grid-cols-2 grid-cols-1 gap-4">
<div class="flex flex-col py-8 w-3/4">
<div class="text-red">
{{render '@heading--h3'}}
</div>
{{render '@paragraph' this.paragraph}}
<div class="block mt-4">
{{render '@button--red'}}
</div>
</div>
<div>
{{render '@card-contact--small'}}
</div>
</div>
</div>
</div>
</div>
</section>
</div>
{
"content-header": {
"modifier": "",
"image": false,
"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
}
},
"paragraph": {
"text": "<p>Bellen kan elke werkdag van 8u30 tot 17u, of stuur een email naar <a href=\"/\">test@test.be</a> </p>",
"modifier": "",
"isRichText": false
},
"events": [
{},
{},
{},
{},
{},
{}
]
}
.intranet-vacatures-detail {
.card-left-navigation {
.red-simple {
position: -webkit-sticky;
position: sticky;
top: 108px;
@screen lg {
top: 200px;
}
}
}
.content-card-container {
margin-top: 20px;
@screen lg {
margin-left: 20px;
margin-top: 0px;
}
}
}
No notes defined.