<div class="tpl-homepage">
<section class='homepage-header'>
<div class='uhasselt-container'>
<div class='grid-column list-education'>
<div class='link-list-education-wrap'>
<span class="heading h2">
What are you looking for?
</span>
<div class="link-list-education">
<div class="links-nav column">
<ul class="information-links">
<li class="active">
<a href="#education-panel-0">
<span class="icon fal fa-info-square " aria-hidden="true"></span>Information for
</a>
</li>
<li class="">
<a href="#education-panel-1">
<span class="icon fal fa-graduation-cap " aria-hidden="true"></span>Programmes
</a>
</li>
<li class="">
<a href="#education-panel-2">
<span class="icon fal fa-window " aria-hidden="true"></span>Applications and admission
</a>
</li>
<li class="">
<a href="#education-panel-3">
<span class="icon fal fa-user-graduate " aria-hidden="true"></span>Information for students
</a>
</li>
</ul>
</div>
<div id="scroll-to-panel">
<div class="education-panel education-panel-0 ">
<div class="link-list white">
<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">Information for</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<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="education-panel education-panel-1 hidden">
<div class="link-list white">
<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">Programmes</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<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="education-panel education-panel-2 hidden">
<div class="link-list white">
<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">Applications and admission</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<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="education-panel education-panel-3 hidden">
<div class="link-list white">
<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">Information for students</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<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>
</div>
</div>
</div>
<div class='featured-item-wrapper'>
<div class="featured-item">
<div class="call-to-action">
<div class="wrap-info">
<div class="title">Online Infodagen 8/7 en 26/8</div>
<a href="#" class="button button-red ">
<span>
<span class="text">
Bekijk de online infodagen
</span>
</span>
</a>
</div>
</div>
<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="1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/234/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/232/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/233/1045/850" 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>
</div>
</div>
</section>
<section class='homepage-header'>
<div class='uhasselt-container'>
<div class='grid-column link-list-wrapper left'>
<div class="heading h2">
Informatie voor
</div>
<div class="link-list red">
<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 class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<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='grid-column link-list-wrapper right'>
<div class="heading h2">
Opleidingen
</div>
<div class="link-list red">
<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 class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<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='grid-column cta'>
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Alle opleidingen
</span>
</span>
</a>
</div>
</div>
<div class='featured-item-wrapper'>
<div class="featured-item">
<div class="call-to-action">
<div class="wrap-info">
<div class="title">Online Infodagen 8/7 en 26/8</div>
<a href="#" class="button button-red ">
<span>
<span class="text">
Bekijk de online infodagen
</span>
</span>
</a>
</div>
</div>
<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="1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/234/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/232/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/233/1045/850" 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>
</div>
</div>
</section>
<div class="org-usp-banner red">
<div class="wrap-image">
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/960/1000" alt="Test" loading="lazy">
</picture>
</div>
<div class="wrap-information">
<h1 class="heading heading-display">
Een persoonlijke aanpak
</h1>
<div class="wrap-text">
<div class="item">
<div class='usp-text '>
<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">
Usp Item 1
</h3>
</div>
</div>
<div class='paragraph '>
<p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
</div>
</div>
</div>
<div class="item">
<div class='usp-text '>
<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">
Usp Item 2
</h3>
</div>
</div>
<div class='paragraph '>
<p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
</div>
</div>
</div>
<div class="item">
<div class='usp-text '>
<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">
Usp Item 3
</h3>
</div>
</div>
<div class='paragraph '>
<p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
</div>
</div>
</div>
<div class="item">
<div class='usp-text '>
<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">
Usp Item 4
</h3>
</div>
</div>
<div class='paragraph '>
<p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
</div>
</div>
</div>
</div>
<div class="wrap-cta">
<a href="#" class="button button-black ">
<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>
<section class='org-card-slider'>
<div class='uhasselt-container'>
<div class='column'>
<div class='col-span-12 md:col-span-6 lg:col-span-3'>
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
<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="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 class='col-span-12 md:col-span-6 lg:col-span-9'>
<div class='card-slider'>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-pagination'></div>
</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>
</div>
</div>
</section>
<section class='org-card-slider'>
<div class='uhasselt-container'>
<div class='column'>
<div class='col-span-12 md:col-span-6 lg:col-span-3'>
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
<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="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 class='col-span-12 md:col-span-6 lg:col-span-9'>
<div class='card-slider'>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-pagination'></div>
</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>
</div>
</div>
</section>
<div class="uhasselt-container">
<div class="counter">
<div class="uhasselt-container">
<div class="wrapper">
<div class="count">
<div class="count-top">
<div class="top-content" data-target="6500"></div>
</div>
<div class="count-contents">
<span class="icon fal fa-user-graduate " aria-hidden="true"></span>
<div class="text">Studenten</div>
</div>
</div>
<div class="count">
<div class="count-top">
<div class="top-content" data-target="650"></div>
</div>
<div class="count-contents">
<span class="icon fal fa-folder " aria-hidden="true"></span>
<div class="text">Onderzoekers & medewerkers</div>
</div>
</div>
<div class="count">
<div class="count-top">
<div class="top-content" data-target="65"></div>
</div>
<div class="count-contents">
<span class="icon fal fa-graduation-cap " aria-hidden="true"></span>
<div class="text">Doctoraatstudenten</div>
</div>
</div>
<div class="count">
<div class="count-top">
<div class="top-content" data-target="60"></div>
</div>
<div class="count-contents">
<span class="icon fal fa-university " aria-hidden="true"></span>
<div class="text">Faculteiten</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tpl-homepage">
{{render '@homepage-header'}}
{{render '@usp-banner'}}
{{render '@card-slider'}}
{{render '@card-slider'}}
<div class="uhasselt-container">
{{render '@counter'}}
</div>
</div>
/* No context defined. */
.tpl-homepage,
.dt-homepage {
#uhasselt-page > .org-multi-column-block {
background: url(/assets/img/bg_home.png) no-repeat;
background-position: right top;
}
#uhasselt-page > .org-multi-column-block ~ .org-multi-column-block {
@apply bg-transparent;
}
.alert {
@apply mb-10;
}
.nav-desktop-wrapper {
@apply border-none;
}
}
No notes defined.