<!-- Default -->
<section class='footer'>
<div class='uhasselt-container'>
<div class='footer-top'>
<div class='footer-column '>
<div class="link-list gray">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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>
<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='footer-column'>
<div class="link-list gray">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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>
<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='footer-column'>
<div class="link-list gray">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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>
<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='footer-column'>
<div class="link-list gray">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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>
<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>
<h3 class="heading social-title">
Social media
</h3>
<ul class="social horizontal">
<li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook fa-lg " aria-hidden="true"></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram fa-lg " aria-hidden="true"></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter fa-lg " aria-hidden="true"></span></a></li>
<li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube fa-lg " aria-hidden="true"></span></a></li>
<li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin fa-lg " aria-hidden="true"></span></a></li>
</ul>
</div>
</div>
<div class='footer-bottom'>
<div class='footer-column first-col'>
<ul class='privacy' data-reset-text='Reset cookies'>
<li>© 2022 - Universiteit Hasselt</li>
<li><a class="link " aria-label="" title="">
<span class="text">Gebruiksvoorwaarden & Privacy</span>
</a>
</li>
<li><a class="link " aria-label="" title="">
<span class="text">Toegankelijkheidsverklaring</span>
</a>
</li>
</ul>
</div>
<div class='footer-column second-col'>
<ul class='language'>
<li class='active'><a class="link " aria-label="" title="">
<span class="text">Nederlands</span>
</a>
</li>
<li class=''><a class="link " aria-label="" title="">
<span class="text">English</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer Intranet -->
<section class='footer'>
<div class='uhasselt-container'>
<div class='footer-top'>
<div class='footer-column multiple-cols'>
<div class="link-list transparent">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
<ul class="link-list-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 href="#" 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 href="#" 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 href="#" 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 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 href="#" 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 href="#" 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 href="#" 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 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 href="#" 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 href="#" 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 href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
</div>
<div class='footer-column'>
<div class="link-list transparent">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
</div>
<div>
<div class='contact-list'>
<div class='contact-list-heading'>
<h3 class="heading social-title">
Social media
</h3>
</div>
<div class='contact-list-block'>
<p class='contact-list-item'>A USP for UHasselt</p>
<p class='contact-list-item'>A USP for UHasselt</p>
<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 class='contact-list-block-scnd'>
<p class='contact-list-item'>A USP for UHasselt</p>
<p class='contact-list-item'>A USP for UHasselt</p>
<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='footer-column'>
<div class="link-list transparent">
<div class="link-list-header ">
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</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>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class='footer-bottom'>
<div class='footer-column first-col'>
<ul class='privacy' data-reset-text='Reset cookies'>
<li>© 2022 - Universiteit Hasselt</li>
<li><a class="link " aria-label="" title="">
<span class="text">Gebruiksvoorwaarden & Privacy</span>
</a>
</li>
<li><a class="link " aria-label="" title="">
<span class="text">Toegankelijkheidsverklaring</span>
</a>
</li>
</ul>
</div>
<div class='footer-column second-col'>
<ul class='language'>
<li class='active'><a class="link " aria-label="" title="">
<span class="text">Nederlands</span>
</a>
</li>
<li class=''><a class="link " aria-label="" title="">
<span class="text">English</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class='footer'>
<div class='uhasselt-container'>
<div class='footer-top'>
<div class='footer-column {{#unless button}}multiple-cols{{/unless}}'>
{{#if button}}
{{render '@link-list--link-list-gray' @root.items}}
{{else}}
{{render
'@link-list--link-list-transparent-no-cta-12'
@root.items
}}
{{/if}}
</div>
<div class='footer-column'>
{{#if button}}
{{render '@link-list--link-list-gray'}}
{{else}}
{{render '@link-list--link-list-transparent-no-cta'}}
{{/if}}
</div>
{{#if contact}}
<div>
{{render '@contact-list'}}
</div>
{{else}}
<div class='footer-column'>
{{#if button}}
{{render '@link-list--link-list-gray'}}
{{else}}
{{render '@link-list--link-list-transparent-no-cta'}}
{{/if}}
</div>
{{/if}}
<div class='footer-column'>
{{#if button}}
{{render '@link-list--link-list-gray'}}
{{else}}
{{render '@link-list--link-list-transparent-no-cta'}}
{{/if}}
{{#if socials}}
{{render '@heading' @root.heading}}
{{render '@social'}}
{{/if}}
</div>
</div>
<div class='footer-bottom'>
<div class='footer-column first-col'>
<ul class='privacy' data-reset-text='Reset cookies'>
<li>© 2022 - Universiteit Hasselt</li>
{{#each links}}
<li>{{render '@link' link}}</li>
{{/each}}
</ul>
</div>
<div class='footer-column second-col'>
<ul class='language'>
{{#each language}}
<li class='{{status}}'>{{render '@link' link}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
</section>
/* Default */
{
"button": true,
"socials": true,
"contact": false,
"heading": {
"text": "Social media",
"tag": "h3",
"modifier": "social-title"
},
"status": "active",
"language": [
{
"link": {
"text": "Nederlands"
},
"status": "active"
},
{
"link": {
"text": "English"
}
}
],
"links": [
{
"link": {
"text": "Gebruiksvoorwaarden & Privacy"
}
},
{
"link": {
"text": "Toegankelijkheidsverklaring"
}
}
]
}
/* Footer Intranet */
{
"button": false,
"socials": false,
"contact": true,
"heading": {
"text": "Social media",
"tag": "h3",
"modifier": "social-title"
},
"status": "active",
"language": [
{
"link": {
"text": "Nederlands"
},
"status": "active"
},
{
"link": {
"text": "English"
}
}
],
"links": [
{
"link": {
"text": "Gebruiksvoorwaarden & Privacy"
}
},
{
"link": {
"text": "Toegankelijkheidsverklaring"
}
}
]
}
section.footer {
@apply bg-gray;
@apply p-8;
.link-list {
@apply p-0;
}
.footer-top {
@apply grid gap-8;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@screen md {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@screen sm {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.footer-column {
.social-title {
@apply font-semibold;
@apply my-8;
}
.social {
@apply mb-8;
}
}
.multiple-cols {
grid-column-start: 1;
grid-column-end: 2;
@screen sm {
grid-column-start: 1;
grid-column-end: 3;
}
}
}
.footer-bottom {
@apply mt-24 mb-12 grid gap-8;
grid-template-rows: auto;
@screen md {
grid-template-areas: 'first-col first-col first-col second-col';
.first-col {
grid-area: first-col;
}
.second-col {
grid-area: second-col;
}
}
.privacy,
.language {
li {
@apply mr-4;
@apply inline-block;
a {
@apply text-black;
}
}
}
.privacy a {
@apply underline;
}
.language .active {
@apply font-bold;
}
}
}
function CookiebotCallback_OnLoad() {
var $footerUtils = $('ul.privacy');
if (!$footerUtils.find('#reset-cookies').length) {
$footerUtils.append(
'<li id="reset-cookies"><a class="atm-link" href="javascript:CookieConsent.renew()"></a></li>'
);
$footerUtils
.find('#reset-cookies a')
.text($footerUtils.data('reset-text'));
}
}
No notes defined.