<section class="link-list-overview">
<div class="uhasselt-container">
<div class="wrapper">
<div class="link-list-items">
<div class="head-wrap">
<span class="icon far fa-backpack fa-lg " aria-hidden="true"></span><span class="heading h3">
Lessen & examens
</span>
</div>
<ul>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Uurroosters</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Studiegids</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Academische kalender</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Examenrooster</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Onderwijs- en examenreglement</span>
</a>
</li>
</ul>
<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 class="link-list-items">
<div class="head-wrap">
<span class="icon far fa-backpack fa-lg " aria-hidden="true"></span><span class="heading h3">
Lessen & examens
</span>
</div>
<ul>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Uurroosters</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Studiegids</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Academische kalender</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Examenrooster</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Onderwijs- en examenreglement</span>
</a>
</li>
</ul>
<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 class="link-list-items">
<div class="head-wrap">
<span class="icon far fa-backpack fa-lg " aria-hidden="true"></span><span class="heading h3">
Lessen & examens
</span>
</div>
<ul>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Uurroosters</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Studiegids</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Academische kalender</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Examenrooster</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Onderwijs- en examenreglement</span>
</a>
</li>
</ul>
<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 class="link-list-items">
<div class="head-wrap">
<span class="icon far fa-backpack fa-lg " aria-hidden="true"></span><span class="heading h3">
Lessen & examens
</span>
</div>
<ul>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Uurroosters</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Studiegids</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Academische kalender</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Examenrooster</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Onderwijs- en examenreglement</span>
</a>
</li>
</ul>
<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 class="link-list-items">
<div class="head-wrap">
<span class="icon far fa-backpack fa-lg " aria-hidden="true"></span><span class="heading h3">
Lessen & examens
</span>
</div>
<ul>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Uurroosters</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Studiegids</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Academische kalender</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Examenrooster</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Onderwijs- en examenreglement</span>
</a>
</li>
</ul>
<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 class="link-list-items">
<div class="head-wrap">
<span class="icon far fa-backpack fa-lg " aria-hidden="true"></span><span class="heading h3">
Lessen & examens
</span>
</div>
<ul>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Uurroosters</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Studiegids</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Academische kalender</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Examenrooster</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="text">Onderwijs- en examenreglement</span>
</a>
</li>
</ul>
<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 class="mt-8">
<div class="link-wrap">
<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>
</section>
<section class="link-list-overview">
<div class="uhasselt-container">
<div class="wrapper">
{{#each list}}
{{render '@link-list-items' merge=true}}
{{/each}}
</div>
<div class="mt-8">
<div class="link-wrap">
{{ render '@link' link merge=true}}
</div>
</div>
</div>
</section>
{
"list": [
{},
{},
{},
{},
{},
{}
]
}
.link-list-overview {
@apply mb-8;
@apply relative;
.link-list.gray {
@apply bg-white shadow-2xl;
@apply p-6;
.heading.title {
@apply pb-4 border-b border-solid border-gray;
}
}
&:before {
content: '';
background-color: #f7f7f7;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
.uhasselt-container {
@apply py-16;
.wrapper {
@apply grid;
@apply gap-8;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@screen md {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
}
.link-wrap {
@apply w-full;
@apply text-left;
@apply md:text-right;
.link {
@apply underline;
}
}
}
.has-sidenav {
.link-list-overview {
.uhasselt-container {
@apply p-0;
}
}
}
No notes defined.