<div class="intranet-homepage">
<section class='mb-12'>
<div class='uhasselt-container'>
<div class="navlist-items-grid mt-8 mb-20 grid gap-x-12 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
<div class='nav-list-item'>
<a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
<div class='nav-list-item-icon'>
<span class="icon fal fa-car " aria-hidden="true"></span>
</div>
<p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
</a>
<div class='nav-list-item-icon-action'>
<button class="link " aria-label="" title="" id="">
<span class="text"></span>
<div class="span-icon-only">
<span class="icon fal fa-chevron-right " aria-hidden="true"></span>
</div>
</button>
</div>
</div>
</div>
<div class='flex flex-wrap -ml-10'>
<div class='w-full lg:w-1/2 pl-10 mb-12 lg:mb-0'>
<div class='usp-text red-icon'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<h3 class="heading title">
Een persoonlijke aanpak
</h3>
</div>
</div>
</div>
<div class='spotlight'>
<div class='spotlight-gradient'></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>
</div>
<div class='spotlight-context'>
<div class='spotlight-context-content'>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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='spotlight-context-button'>
<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>
<div class='w-full lg:w-1/2 pl-10 md:mb-12 lg:mb-0'>
<div class='usp-text red-icon'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<h3 class="heading title">
Een persoonlijke aanpak
</h3>
</div>
</div>
</div>
<div class='flex flex-wrap -ml-10'>
<div class='w-full md:w-1/2 pl-10 md:mb-12'>
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class='w-full md:w-1/2 pl-10 md:mb-12'>
<div class="card-list list-vertical card-list-no-border">
<div class="card-list-item js--clickable">
<div class="wrapper-vertical">
<div>
<div class="date-block date-block-horizontal">
<div>10 nov</div>
</div>
</div>
<div class="information">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
<span><span class="icon fal fa-clock fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
<span><span class="icon fal fa-map-marker-alt fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
</div>
</div>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Bekijk de volledige agenda</span>
</a>
</div>
</div>
</div>
<div class='flex w-full pl-10 md:justify-end'>
<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>
</div>
</section>
<section class='mb-12'>
<div class='uhasselt-container'>
<div class='flex flex-wrap -ml-10'>
<div class='w-full lg:w-1/2 pl-10 mb-12 lg:mb-0'>
<div class='usp-text red-icon'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<h3 class="heading title">
Een persoonlijke aanpak
</h3>
</div>
</div>
</div>
<div class='block p-8 border border-gray mb-8'>
<div class='multi-column-card-slider'>
<div class='multi-column-card-slider-header'>
<h3 class="heading multi-column-card-slider-title">
Campus Diepenbeek
</h3>
<div class='multi-column-card-slider-header-navigation'>
<div class='multi-column-card-slider-header-navigation-index'>
<div class='multi-column-card-slider-index-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
Ma, 24-04
</div>
<div class='swiper-slide'>
Di, 25-04
</div>
<div class='swiper-slide'>
Woe, 26-04
</div>
<div class='swiper-slide'>
Dond, 27-04
</div>
<div class='swiper-slide'>
Vrij, 28-04
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-header-navigation-control'>
<div class='swiper-prev'>
<a href="#" class="prev-next prev-next-prev prev-next-secondary">
<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 prev-next-secondary">
<span class="icon fal fa-angle-right fa-2x " aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-card-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='flex w-full pl-10 md:justify-end'>
<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='w-full lg:w-1/2 pl-10 md:mb-12 lg:mb-0'>
<div class='usp-text red-icon'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<h3 class="heading title">
Een persoonlijke aanpak
</h3>
</div>
</div>
</div>
<div class='flex flex-wrap -ml-10'>
<div class='w-full md:w-1/2 pl-10 mb-12'>
<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 class='w-full md:w-1/2 pl-10 mb-12'>
<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 class='flex w-full pl-10 md:justify-end'>
<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>
</div>
</section>
<section class='pt-12 lg:pb-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='flex flex-wrap -ml-4'>
<div class='w-full pl-4'>
<div class='usp-text red-icon'>
<div class='usp-wrapper'>
<div class='usp-icon'><span class="icon fal fa-user-friends " aria-hidden="true"></span></div>
<div class='usp-heading'>
<h3 class="heading title">
Een persoonlijke aanpak
</h3>
</div>
</div>
</div>
</div>
<div class='w-full lg:w-1/2 pl-4 mb-12 lg:mb-0'>
<div class='block bg-white p-8'>
<div class='feed'>
<div class='feed-header'>
<div class='feed-header-title'>
<span class="icon fas fa-users " aria-hidden="true"></span>
<h3 class="heading feed-header-title-text">
Prikbord
</h3>
</div>
<div class='feed-header-action'>
<a href="#" class="link " aria-label="" title="Bekijk alle berichten">
<span class="text">Bekijk alle berichten</span>
</a>
</div>
</div>
<div class='feed-body'>
<div class='feed-message'>
<div class='feed-message-header'>
<div class='feed-message-header-avatar-author'>
<div class="avatar avatar-red feed-message-header-avatar">
<span>ET</span>
</div>
<span class='feed-message-header-author'>
Albert Verscheuven
</span>
</div>
<span class='feed-message-header-time'>
15u45
</span>
<span class="tag tag-red-round tag-sm">
Populair
</span>
</div>
<div class='feed-message-body'>
<h3 class="heading feed-message-body-title">
Titel van bericht
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
</p>
</div>
<div class='feed-message-footer'>
<span class='feed-message-footer-col feed-message-footer-like'>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='like1' name='like1' value='like' />
<label for='like1' class='icon-checked'>
<span class="icon fas fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
<label for='like1' class='icon-unchecked'>
<span class="icon fal fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
</div>
</span>
<span class='feed-message-footer-col feed-message-footer-react'>
<button class="link link-secondary" aria-label="" title="Reageer">
<span class="icon fas fa-comment-alt-lines " aria-hidden="true"></span>
<span class="text">Reageer</span>
</button>
</span>
<span class='feed-message-footer-col feed-message-footer-reactions'>
<button class="link link-secondary" aria-label="" title="12 reacties">
<span class="text">12 reacties</span>
</button>
</span>
</div>
</div>
<div class='feed-message'>
<div class='feed-message-header'>
<div class='feed-message-header-avatar-author'>
<div class="avatar avatar-red feed-message-header-avatar">
<span>ET</span>
</div>
<span class='feed-message-header-author'>
Albert Verscheuven
</span>
</div>
<span class='feed-message-header-time'>
15u45
</span>
</div>
<div class='feed-message-body'>
<h3 class="heading feed-message-body-title">
Titel van bericht
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
</p>
</div>
<div class='feed-message-footer'>
<span class='feed-message-footer-col feed-message-footer-like'>
<div class='item-toggle'>
<input class='item-toggle-input' type='checkbox' id='like2' name='like2' value='like' />
<label for='like2' class='icon-checked'>
<span class="icon fas fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
<label for='like2' class='icon-unchecked'>
<span class="icon fal fa-thumbs-up " aria-hidden="true"></span>
<span class="label-text">Like</span>
</label>
</div>
</span>
<span class='feed-message-footer-col feed-message-footer-react'>
<button class="link link-secondary" aria-label="" title="Reageer">
<span class="icon fas fa-comment-alt-lines " aria-hidden="true"></span>
<span class="text">Reageer</span>
</button>
</span>
<span class='feed-message-footer-col feed-message-footer-reactions'>
<button class="link link-secondary" aria-label="" title="12 reacties">
<span class="text">12 reacties</span>
</button>
</span>
</div>
</div>
</div>
<div class='feed-footer'>
<a title="Bericht toevoegen" href="#" class="button button-red ">
<span>
<span class="text">
Bericht toevoegen
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class='w-full lg:w-1/2 pl-4 mb-12 lg:mb-0'>
<div class='flex flex-wrap -ml-4'>
<div class='w-full md:w-1/2 pl-4 mb-12'>
<div class='block bg-white p-8'>
<div class='personal-info-list'>
<div class='personal-info-list-heading'>
<div class='personal-info-list-heading-icon'>
<span class="icon fas fa-user-alt " aria-hidden="true"></span>
</div>
<div class='personal-info-list-heading-h3'>
<h3 class="heading ">
The quick brown fox jumps over the lazy dog
</h3>
</div>
</div>
<div class='personal-info-list-item'>
<div class='personal-info'>
<div class='personal-info-head'>
<span class="icon far fa-heart " aria-hidden="true"></span>
<p class='personal-info-head-title'>Andries Ghesquiere</p>
</div>
<p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
</div>
<div class='personal-info-list-item'>
<div class='personal-info'>
<div class='personal-info-head'>
<span class="icon far fa-heart " aria-hidden="true"></span>
<p class='personal-info-head-title'>Andries Ghesquiere</p>
</div>
<p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
</div>
<div class='personal-info-list-item'>
<div class='personal-info'>
<div class='personal-info-head'>
<span class="icon far fa-heart " aria-hidden="true"></span>
<p class='personal-info-head-title'>Andries Ghesquiere</p>
</div>
<p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
</div>
<div class='personal-info-list-item'>
<div class='personal-info'>
<div class='personal-info-head'>
<span class="icon far fa-heart " aria-hidden="true"></span>
<p class='personal-info-head-title'>Andries Ghesquiere</p>
</div>
<p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
</div>
<div class='personal-info-list-item'>
<div class='personal-info'>
<div class='personal-info-head'>
<span class="icon far fa-heart " aria-hidden="true"></span>
<p class='personal-info-head-title'>Andries Ghesquiere</p>
</div>
<p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
</div>
<div class='personal-info-list-item'>
<div class='personal-info'>
<div class='personal-info-head'>
<span class="icon far fa-heart " aria-hidden="true"></span>
<p class='personal-info-head-title'>Andries Ghesquiere</p>
</div>
<p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
</div>
</div>
</div>
</div>
<div class='w-full md:w-1/2 pl-4 md:mb-12'>
<div class='block bg-red p-8'>
<div class='poll'>
<div class='poll-header'>
<span class="icon fas fa-chart-bar " aria-hidden="true"></span>
<h3 class="heading poll-header-title">
Poll van de dag
</h3>
</div>
<div class='poll-body'>
<h4 class="heading poll-body-question">
Binnenkort kunnen we allen weer naar kantoor. Hoe zou jij in de toekomst thuiswerk graag combineren met dagen op kantoor?
</h4>
<form>
<div class='mb-4'>
<div class="atm-form-radiobutton radio-inverted text-description">
<input type="radio" class="form-radio" id="answers-1" name="description">
<label class="form-radio-label" for="answers-1">
<div class="form-radio-label-title">
Kantoor
</div>
<div class="form-radio-description">
Thuiswerk was niet helemaal mijn ding, ik ga graag terug full-time naar kantoor.
</div>
</label>
</div>
</div>
<div class='mb-4'>
<div class="atm-form-radiobutton radio-inverted text-description">
<input type="radio" class="form-radio" id="answers-2" name="description">
<label class="form-radio-label" for="answers-2">
<div class="form-radio-label-title">
Semi-flexibel
</div>
<div class="form-radio-description">
Het zou fijn zijn om toch zeker enkele vaste dagen met alle collega’s op kantoor te zijn, en enkele vaste dagen de mogelijkheid hebben om allen thuis te werken.
</div>
</label>
</div>
</div>
<div class='mb-4'>
<div class="atm-form-radiobutton radio-inverted text-description">
<input type="radio" class="form-radio" id="answers-3" name="description">
<label class="form-radio-label" for="answers-3">
<div class="form-radio-label-title">
Flexibel
</div>
<div class="form-radio-description">
Ik behoud het liefst veel flexibiliteit, en beslis graag zelf wanneer ik naar kantoor kom, of thuis werk.
</div>
</label>
</div>
</div>
<button type="submit" title="Stem" id="stem" class="button button-black poll-submit ">
<span>
<span class="text">
Stem
</span>
</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='pt-12 pb-24'>
<div class='uhasselt-container'>
<h3 class="heading ">
Thema's
</h3>
<div class='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 ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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 class="link-list white-red">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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="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>
</section>
</div>
<div class="intranet-homepage">
<section class='mb-12'>
<div class='uhasselt-container'>
<div class="navlist-items-grid mt-8 mb-20 grid gap-x-12 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
{{#each navlistitems as |navlistitem|}}
{{render '@nav-list-item--nav-list-arrow-right'}}
{{/each}}
</div>
<div class='flex flex-wrap -ml-10'>
<div class='w-full lg:w-1/2 pl-10 mb-12 lg:mb-0'>
{{render '@usp-text--usp-text-without-text-icon-red'}}
{{render '@spotlight'}}
</div>
<div class='w-full lg:w-1/2 pl-10 md:mb-12 lg:mb-0'>
{{render '@usp-text--usp-text-without-text-icon-red'}}
<div class='flex flex-wrap -ml-10'>
<div class='w-full md:w-1/2 pl-10 md:mb-12'>
{{render '@card-list--card-list-no-border'}}
</div>
<div class='w-full md:w-1/2 pl-10 md:mb-12'>
{{render '@card-list--card-list-no-border'}}
</div>
<div class='flex w-full pl-10 md:justify-end'>
{{render '@link'}}
</div>
</div>
</div>
</div>
</div>
</section>
<section class='mb-12'>
<div class='uhasselt-container'>
<div class='flex flex-wrap -ml-10'>
<div class='w-full lg:w-1/2 pl-10 mb-12 lg:mb-0'>
{{render '@usp-text--usp-text-without-text-icon-red'}}
<div class='block p-8 border border-gray mb-8'>
{{render '@multi-column-card-slider'}}
</div>
<div class='flex w-full pl-10 md:justify-end'>
{{render '@link'}}
</div>
</div>
<div class='w-full lg:w-1/2 pl-10 md:mb-12 lg:mb-0'>
{{render '@usp-text--usp-text-without-text-icon-red'}}
<div class='flex flex-wrap -ml-10'>
<div class='w-full md:w-1/2 pl-10 mb-12'>
{{render '@article-card'}}
</div>
<div class='w-full md:w-1/2 pl-10 mb-12'>
{{render '@article-card'}}
</div>
<div class='flex w-full pl-10 md:justify-end'>
{{render '@link'}}
</div>
</div>
</div>
</div>
</div>
</section>
<section class='pt-12 lg:pb-12 bg-gray-300'>
<div class='uhasselt-container'>
<div class='flex flex-wrap -ml-4'>
<div class='w-full pl-4'>
{{render '@usp-text--usp-text-without-text-icon-red'}}
</div>
<div class='w-full lg:w-1/2 pl-4 mb-12 lg:mb-0'>
<div class='block bg-white p-8'>
{{render '@feed'}}
</div>
</div>
<div class='w-full lg:w-1/2 pl-4 mb-12 lg:mb-0'>
<div class='flex flex-wrap -ml-4'>
<div class='w-full md:w-1/2 pl-4 mb-12'>
<div class='block bg-white p-8'>
{{render '@personal-info-list'}}
</div>
</div>
<div class='w-full md:w-1/2 pl-4 md:mb-12'>
<div class='block bg-red p-8'>
{{render '@poll'}}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='pt-12 pb-24'>
<div class='uhasselt-container'>
{{render '@heading' themas.heading}}
<div class='grid gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'>
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
{{render '@link-list--link-list-white-red'}}
</div>
</div>
</section>
</div>
{
"themas": {
"heading": {
"tag": "h3",
"text": "Thema's"
}
},
"navlistitems": [
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{}
]
}
.intranet-homepage {
width: 100%;
.usp-heading {
margin-bottom: 20px;
}
}
No notes defined.