<div class='tpl-study-overview' data-sticky-container>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-12'>
<div class='left-col'>
<div id="search-filter-desktop">
<form class="search-filter-desktop-form">
<details class="search-filter-category" open>
<summary class="search-filter-heading">
<h4 class="heading text-red">
Opleidingstype
</h4>
<div class="search-filter-toggle">
<span class="icon far fa-chevron-down icon-down" aria-hidden="true"></span>
<span class="icon far fa-chevron-up icon-up" aria-hidden="true"></span>
</div>
</summary>
<div class="search-filter-desktop-items">
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb1" name="cb1">
<label class="form-label " for="cb1">
Item 1
</label>
</div>
</div>
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb2" name="cb2">
<label class="form-label " for="cb2">
Item 2
</label>
</div>
</div>
</div>
</details>
<details class="search-filter-category">
<summary class="search-filter-heading">
<h4 class="heading text-red">
Interessegebied
</h4>
<div class="search-filter-toggle">
<span class="icon far fa-chevron-down icon-down" aria-hidden="true"></span>
<span class="icon far fa-chevron-up icon-up" aria-hidden="true"></span>
</div>
</summary>
<div class="search-filter-desktop-items">
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb3" name="cb3">
<label class="form-label " for="cb3">
Item 3
</label>
</div>
</div>
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb4" name="cb4">
<label class="form-label " for="cb4">
Item 4
</label>
</div>
</div>
</div>
</details>
<details class="search-filter-category">
<summary class="search-filter-heading">
<h4 class="heading text-red">
Taal
</h4>
<div class="search-filter-toggle">
<span class="icon far fa-chevron-down icon-down" aria-hidden="true"></span>
<span class="icon far fa-chevron-up icon-up" aria-hidden="true"></span>
</div>
</summary>
<div class="search-filter-desktop-items">
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb5" name="cb5">
<label class="form-label " for="cb5">
Item 5
</label>
</div>
</div>
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb6" name="cb6">
<label class="form-label " for="cb6">
Item 6
</label>
</div>
</div>
</div>
</details>
<details class="search-filter-category">
<summary class="search-filter-heading">
<h4 class="heading text-red">
Lesvorm
</h4>
<div class="search-filter-toggle">
<span class="icon far fa-chevron-down icon-down" aria-hidden="true"></span>
<span class="icon far fa-chevron-up icon-up" aria-hidden="true"></span>
</div>
</summary>
<div class="search-filter-desktop-items">
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb7" name="cb7">
<label class="form-label " for="cb7">
Item 7
</label>
</div>
</div>
<div class="search-filter-desktop-item">
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="cb8" name="cb8">
<label class="form-label " for="cb8">
Item 8
</label>
</div>
</div>
</div>
</details>
</form>
</div>
</div>
<div class='right-col'>
<div class='study-tags'>
Je hebt gefilterd op:
<a class="tag " href="#">
This is a tag
<span class="icon fal fa-times " aria-hidden="true"></span>
</a>
</div>
<div class='study-result-filter'>
<p>Er zijn <strong>46</strong> opleidingen gevonden</p>
<div class='study-select'>
<select class="form-select " name="select" id="select">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="icon fal fa-list fa-lg " aria-hidden="true"></span>
<span class="text">Lijst</span>
</a>
<a href="#" class="link active" aria-label="" title="This is what a link looks like">
<span class="icon fal fa-line-columns fa-lg " aria-hidden="true"></span>
<span class="text">Detail</span>
</a>
</div>
</div>
<section class='study-card study-card-simple js--clickable'>
<div class='left'>
<div class="study-title">
<h4 class="heading ">
Bachelor in de architectuur
</h4>
<div><span class="tag tag-gray ">
Ook in het Engels
</span>
</div>
</div>
<div class='wrap-info'>
<h6 class="heading ">
Academisch gerichte bacheloropleiding
</h6>
</div>
<div class='wrap-text'>
</div>
<div class='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Meer informatie
</span>
</span>
</a>
</div>
</div>
</section>
<section class='study-card study-card-simple js--clickable'>
<div class='left'>
<div class="study-title">
<h4 class="heading ">
Bachelor in de architectuur
</h4>
<div><span class="tag tag-gray ">
Ook in het Engels
</span>
</div>
</div>
<div class='wrap-info'>
<h6 class="heading ">
Academisch gerichte bacheloropleiding
</h6>
</div>
<div class='wrap-text'>
</div>
<div class='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Meer informatie
</span>
</span>
</a>
</div>
</div>
</section>
<section class='study-card js--clickable'>
<div class='left'>
<div class="study-title">
<h2 class="heading ">
Bachelor in de architectuur
</h2>
<div></div>
</div>
<div class='wrap-info'>
<h4 class="heading ">
Academisch gerichte bacheloropleiding
</h4>
<div class="study-info">
<ul>
<li>Campus Diepenbeek</li>
<li>180 - 120 SP</li>
<li>Nederlands</li>
</ul>
</div>
</div>
<div class='wrap-text'>
<h5 class="heading ">
The quick brown fox jumps over the lazy dog
</h5>
<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='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Meer informatie
</span>
</span>
</a>
</div>
</div>
<div class='right'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/331/430/390" alt="Opleiding" loading="lazy">
</picture>
</div>
</section>
<section class='study-card js--clickable'>
<div class='left'>
<div class="study-title">
<h2 class="heading ">
Bachelor in de architectuur
</h2>
<div></div>
</div>
<div class='wrap-info'>
<h4 class="heading ">
Academisch gerichte bacheloropleiding
</h4>
<div class="study-info">
<ul>
<li>Campus Diepenbeek</li>
<li>180 - 120 SP</li>
<li>Nederlands</li>
</ul>
</div>
</div>
<div class='wrap-text'>
<h5 class="heading ">
The quick brown fox jumps over the lazy dog
</h5>
<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='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Meer informatie
</span>
</span>
</a>
</div>
</div>
<div class='right'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/331/430/390" alt="Opleiding" loading="lazy">
</picture>
</div>
</section>
<section class='study-card js--clickable'>
<div class='left'>
<div class="study-title">
<h2 class="heading ">
Bachelor in de architectuur
</h2>
<div></div>
</div>
<div class='wrap-info'>
<h4 class="heading ">
Academisch gerichte bacheloropleiding
</h4>
<div class="study-info">
<ul>
<li>Campus Diepenbeek</li>
<li>180 - 120 SP</li>
<li>Nederlands</li>
</ul>
</div>
</div>
<div class='wrap-text'>
<h5 class="heading ">
The quick brown fox jumps over the lazy dog
</h5>
<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='btn-wrapper'> <a href="https://www.google.nl" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Meer informatie
</span>
</span>
</a>
</div>
</div>
<div class='right'>
<picture class="picture ">
<img class="picture-image " src="https://picsum.photos/id/331/430/390" alt="Opleiding" loading="lazy">
</picture>
</div>
</section>
</div>
</div>
</div>
</div>
<div class='tpl-study-overview' data-sticky-container>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-12'>
<div class='left-col'>
{{render '@search-filter'}}
</div>
<div class='right-col'>
<div class='study-tags'>
Je hebt gefilterd op:
{{render '@tag--tag-icon'}}
</div>
<div class='study-result-filter'>
<p>Er zijn <strong>46</strong> opleidingen gevonden</p>
<div class='study-select'>
{{render '@select'}}
{{render '@link--icon-before' list-view merge=true}}
{{render '@link--icon-before' detail-view merge=true}}
</div>
</div>
{{render '@study-card--study-card-simple'}}
{{render '@study-card--study-card-simple'}}
{{render '@study-card'}}
{{render '@study-card'}}
{{render '@study-card'}}
</div>
</div>
</div>
</div>
{
"list-view": {
"text": "Lijst",
"iconBefore": {
"icon": "fa-list",
"style": "fal",
"size": "fa-lg"
}
},
"detail-view": {
"text": "Detail",
"iconBefore": {
"icon": "fa-line-columns",
"style": "fal",
"size": "fa-lg"
},
"modifier": "active"
}
}
.tpl-study-overview,
.dt-study-overview {
@screen lg {
background: linear-gradient(
90deg,
#f7f7f7 20%,
#ffffff 0,
#ffffff 100%
);
}
.content-header .uhasselt-container .column {
@apply pb-0 lg:pb-8;
.heading {
@apply m-0 lg:mb-8;
}
}
.left-col {
@apply col-span-4 xl:col-span-3;
@apply lg:bg-gray-300 py-6 lg:p-12;
#search-filter-desktop h3.heading {
@apply mt-4;
}
.search-field .form-input {
@apply bg-white;
}
.search-field .button {
@apply float-none;
}
#study-filter {
@apply bg-gray-300 p-6 lg:p-0 mb-6;
}
}
.right-col {
@apply col-span-8 xl:col-span-9;
@apply py-6 lg:py-12;
}
.study-tags {
@apply mb-10 flex flex-wrap gap-4 items-center;
}
.study-result-filter {
@apply mb-6;
@apply flex justify-between gap-4 md:items-center flex-col md:flex-row;
.study-select {
@apply flex gap-4 items-center;
.form-select {
@apply w-44;
}
.link {
@apply text-black-400;
&.active {
@apply text-black;
}
}
}
}
.paragraph {
h3.heading,
.heading.h3 {
@apply text-red;
}
}
}
$(function () {
'use strict';
});
No notes defined.