<section class="content-header hasimage content-header-extra-padding">
<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>
<div class="uhasselt-container-tags">
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
<div class="uhasselt-container-tag"><span class="tag tag-red-outline tag-sm">
This is a tag
</span>
</div>
</div>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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-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='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' />
<label for='replace-id-with-backend-2' class='icon-checked'>
<span class="icon fas fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
<label for='replace-id-with-backend-2' class='icon-unchecked'>
<span class="icon fal fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
</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 flex-col xl:px-24 lg:px-12 mb-8'>
<div class="intranet-news-detail-card 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="mb-8">
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
</div>
<div class="mb-8">
<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>
</div>
<div class="flex flex-col lg:flex-row mb-8">
<div class="block w-full lg:w-2/3">
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<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>
<div class="block lg:ml-16 w-full lg:w-1/3">
<div class="quote">
<div class="quote-inner">
<div class="text h3">Het is een erkenning voor ons onderzoeksteam dat zich al jaren inzet om de effecten van omgevingsfactoren op onze gezondheid in kaart te brengen.</div>
<div class="person h4">Prof. dr. Tim Nawrot</div>
</div>
<span class="icon fas fa-quote-right " aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
<div class="grid lg:grid-cols-2 grid-cols-1 gap-4">
<div class="text-red flex flex-col justify-between py-8">
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
<div class="flex items-center">
<div class="mr-4 text-red">
<span class="icon fas fa-long-arrow-left " aria-hidden="true"></span>
</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>
</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 class="btn-wrapper"> <a href="#" class="button button-red ">
<span>
<span class="text">
Meer weten over Cynthia
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{render '@content-header--content-header-intranet-white-like' content-header}}
<section class='py-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='flex flex-col xl:px-24 lg:px-12 mb-8'>
<div class="intranet-news-detail-card mb-8">
{{render '@content-card-big--news-detail'}}
</div>
<div class="grid lg:grid-cols-2 grid-cols-1 gap-4">
<div class="text-red flex flex-col justify-between py-8">
{{render '@heading--h3'}}
<div class="flex items-center">
<div class="mr-4 text-red">
{{render '@icon' this.icon}}
</div>
{{render '@link'}}
</div>
</div>
<div>
{{render '@card-contact--small-btn'}}
</div>
</div>
</div>
</div>
</section>
{
"content-header": {
"modifier": "",
"image": {
"modifier": "",
"imageModifier": "",
"lazy": true,
"alt": "Test",
"src": "https://picsum.photos/id/239/960/640"
},
"paragraph": false,
"toggle-btn": true,
"like": true,
"tag": true,
"tagsList": [
{
"text": "A tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
},
{
"text": "Another tag for UHasselt"
}
],
"information": false,
"intranet-header": true,
"extra-padding": true
},
"icon": {
"icon": "fa-long-arrow-left",
"style": "fas",
"modifier": ""
},
"events": [
{},
{},
{},
{},
{},
{}
]
}
.intranet-news-detail-card {
margin-top: -150px;
z-index: 5;
width: 100%;
}
No notes defined.