<div class="tpl-study-detail" data-sticky-container>
<div class="uhasselt-container">
<nav class="mol-breadcrumbs">
<ol>
<li>
<a class="link " aria-label="" title="">
<span class="text">Home</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a class="link " aria-label="" title="">
<span class="text">Level 1</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a class="link " aria-label="" title="">
<span class="text">Level 2</span>
</a>
<span class="icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
Current page
</li>
</ol>
</nav>
<div class="lg:grid grid-cols-12 gap-16">
<div class="col-span-3">
<div class="inpage-nav">
<span>
Bekijk de inhoud van deze pagina
</span>
<div class="inpage-nav-inner">
<ul class="">
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Bachelor</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Master</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Voor wie?</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</li>
<li>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</li>
</ul>
<a class="button button-black ">
<span>
<span class="text">
Direct inschrijven?
</span>
</span>
</a>
</div>
</div>
<div class="dropdown-nav">
<details>
<summary>
<div class="wrapper">
<div>
Bekijk de inhoud van deze pagina
</div>
<span class="icon fal fa-angle-down fa-lg icon-open" aria-hidden="true"></span>
<span class="icon fal fa-angle-up fa-lg icon-close" aria-hidden="true"></span>
</div>
</summary>
<div class="dropdown-content">
<a href="#" class="link " aria-label="" title="">
<span class="text">Bachelor</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Master</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Voor wie?</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
<a href="#" class="link " aria-label="" title="">
<span class="text">Wanneer heb je les</span>
</a>
</div>
</details>
</div>
</div>
<div class="col-span-9 has-sidenav">
<div class="p-6 bg-white shadow-2xl z-20">
<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="study-image">
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/239/1920/480" alt="">
</picture>
</div>
<div class="uhasselt-container relative -mt-24 mb-16">
<div class="lg:grid grid-cols-12 gap-16">
<div class="col-start-4 col-end-13 p-6 bg-white shadow-2xl has-sidenav">
<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="tpl-study-detail" data-sticky-container>
<div class="uhasselt-container">
{{render '@breadcrumbs'}}
<div class="lg:grid grid-cols-12 gap-16">
<div class="col-span-3">
{{render '@inpage-nav'}}
</div>
<div class="col-span-9 has-sidenav">
<div class="p-6 bg-white shadow-2xl z-20">
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
<div class="study-image">
{{render '@image' image}}
</div>
<div class="uhasselt-container relative -mt-24 mb-16">
<div class="lg:grid grid-cols-12 gap-16">
<div class="col-start-4 col-end-13 p-6 bg-white shadow-2xl has-sidenav">
{{render '@paragraph'}}
</div>
</div>
</div>
</div>
{
"image": {
"src": "https://picsum.photos/id/239/1920/480"
}
}
.tpl-study-detail {
@apply lg:bg-gray-300;
@apply lg:py-12;
@apply relative;
&:before {
content: url(/assets/img/triangle-big.svg);
@apply hidden lg:block;
@apply absolute;
@apply top-16;
@apply z-30;
right: 20%;
width: 66px;
height: 66px;
}
.has-sidenav {
@apply relative;
@apply z-20;
&:after {
content: url(/assets/img/square-dots.svg);
@apply hidden lg:block;
@apply absolute;
@apply top-32 -right-16;
@apply z-10;
width: 157px;
height: 131px;
}
}
h3.heading,
.heading.h3 {
@apply font-semibold;
}
.mol-breadcrumbs {
@apply mb-9;
}
.study-image {
picture {
@apply w-full mt-0;
height: 480px;
img {
@apply object-cover w-full h-full;
}
}
}
}
.dt-studydetail {
.nav-desktop-mobile {
@apply relative;
&::before {
content: url(/assets/img/triangle-small.svg);
@apply absolute lg:hidden;
@apply -bottom-0 right-8;
width: 33px;
height: 33px;
z-index: 10;
}
}
.joint-wrapper {
@apply flex flex-col md:flex-row justify-between items-center md:text-right;
padding: 0 1.5rem 1rem 1rem;
.paragraph {
@apply pt-4 pr-8 font-bold;
}
picture {
@apply md:w-1/2;
}
}
}
No notes defined.