<div class='tpl-api-overview data-sticky-container dt-apimodeloverview'>
<section class="content-header ">
<div class="uhasselt-container">
<div class="column ">
<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>
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<div class='paragraph paragraph-intro'>
<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 class="button-wrap">
<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>
<a href="#" class="button button-white ">
<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>
<div class='bg-gray-300 py-16'>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-16'>
<div class='col-span-12 lg:col-span-3'>
<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='col-span-12 lg:col-span-9'>
<div class="uhasselt-container">
<div class="table-block">
<h1 class="heading ">
The quick brown fox jumps over the lazy dog
</h1>
<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 class="table-wrapper">
<div class="table-responsive">
<table>
<tr>
<td><a href="www.google.nl">Row 1 Col 1</a></td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
</table>
</div>
</div>
<div class="table-wrapper">
<div class="table-responsive">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td><a href="www.google.nl">Row 1 Col 1</a></td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
</table>
</div>
</div>
<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="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>
</div>
</div>
</div>
<div class='tpl-api-overview data-sticky-container dt-apimodeloverview'>
{{render '@content-header--content-header-white-noimg'}}
<div class='bg-gray-300 py-16'>
<div class='uhasselt-container'>
<div class='lg:grid grid-cols-12 gap-16'>
<div class='col-span-12 lg:col-span-3'>
{{render '@search-filter'}}
</div>
<div class='col-span-12 lg:col-span-9'>
{{render '@table-block'}}
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
.tpl-api-overview {
}
.dt-apimodeloverview {
.oproepen-wrapper {
@apply mb-12;
}
.table-wrapper .table-responsive table tr td:last-of-type {
@apply w-[200px];
}
.anch-link-year {
@apply inline-block;
.link {
@apply bg-red text-white px-4 py-2 mr-6 mb-8 flex-none;
@apply font-semibold border-solid rounded cursor-pointer leading-5;
.text {
@apply no-underline;
}
&:hover {
@apply bg-red-700;
}
&:before {
content: '\f175';
font-family: 'Font Awesome 5 Pro';
@apply pr-2;
}
}
}
.heading-year h2 {
@apply bg-white border border-gray-900 px-4 py-2 mb-6;
&:before {
content: '\f133';
font-family: 'Font Awesome 5 Pro';
@apply pr-4 font-light;
}
}
.fac-list {
@apply ml-4;
}
}
.dt-apimodeldetail {
.council-overview {
@apply mb-8;
}
.project-detail {
@apply mb-8;
}
}
No notes defined.