<div class="tpl-mijn-afwezigheden">
<div class="uhasselt-container">
<div class="intro">
<nav class='mol-breadcrumbs'>
<ol>
<li>
<a href="" class="atm-link " aria-label="" title="">
<span class="text">Home</span>
</a>
<span class="atm-icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
Mijn afwezigheden melden
</li>
</ol>
</nav>
<div class="atm-heading h1">Mijn afwezigheden melden</div>
<div class='atm-paragraph '>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a pulvinar. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, <a href="/some/file" download="download">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<a href="#" class="atm-button button-red ">
<span>
<span class="text">
Nieuwe afwezigheid melden
</span>
<span class="atm-icon fal fa-chevron-circle-right " aria-hidden="true"></span>
</span>
</a>
</div>
<section class='org-procedure-slider'>
<div class="atm-heading h2">Hoe wordt jouw melding verder verwerkt</div>
<div class='card-slider'>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class='mol-procedure-card'>
<div class='title'>
<div class='count'>1</div>
<h3 class="atm-heading ">Melding van afwezigheid</h3>
</div>
<div class='atm-paragraph '>
<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='mol-procedure-card'>
<div class='title'>
<div class='count'>2</div>
<h3 class="atm-heading ">Verwerking voor dienst onderwijs</h3>
</div>
<div class='atm-paragraph '>
<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='mol-procedure-card'>
<div class='title'>
<div class='count'>3</div>
<h3 class="atm-heading ">Communicatie inhaalexamen</h3>
</div>
<div class='atm-paragraph '>
<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='mol-procedure-card'>
<div class='title'>
<div class='count'>4</div>
<h3 class="atm-heading ">Melding van afwezigheid</h3>
</div>
<div class='atm-paragraph '>
<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='mol-procedure-card'>
<div class='title'>
<div class='count'>5</div>
<h3 class="atm-heading ">Afronden van afwezigheid</h3>
</div>
<div class='atm-paragraph '>
<p>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek.</p>
</div>
</div>
</div>
</div>
<div class='swiper-pagination'></div>
</div>
</div>
</section>
<section class='org-absences-overview'>
<div class='wrap-heading'>
<h2 class="atm-heading ">Lopende afwezigheden</h2>
</div>
<div class="mol-absences-card ongoing">
<div class="wrapper">
<div class="column">
<div class="time-block">
<span class="date">
12/04/2021
</span>
<span>
t/m
</span>
<span class="date">
12/04/2021
</span>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Gevraagde examens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div>
Gevraagde inhaalexamens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
<div class="amount text-green">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
<div class="amount text-red">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
<div class="amount text-black-500">
1
</div>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Afwezig onderwijsactiviteiten
</div>
<div class="amount">
1
</div>
</div>
</div>
</div>
<a href="#" class="atm-button button-red ">
<span>
<span class="text">
Bekijk lopende afwezigheid
</span>
</span>
</a>
</div>
</section>
<section class='org-absences-overview'>
<div class='wrap-heading'>
<h2 class="atm-heading ">Eerdere afwezigheden</h2>
<div class='filter-year'>
<strong>Filter op Academiejaar</strong>
<select class="form-select " name="select" id="select">
<option value="0" selected>2020-2021</option>
<option value="1">2019-2020</option>
</select>
</div>
</div>
<div class="mol-absences-card previous">
<div class="wrapper">
<div class="column">
<div class="time-block">
<span class="date">
12/04/2021
</span>
<span>
t/m
</span>
<span class="date">
12/04/2021
</span>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Gevraagde examens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div>
Gevraagde inhaalexamens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
<div class="amount text-green">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
<div class="amount text-red">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
<div class="amount text-black-500">
1
</div>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Afwezig onderwijsactiviteiten
</div>
<div class="amount">
1
</div>
</div>
</div>
</div>
<a href="#" class="atm-button button-red ">
<span>
<span class="text">
Bekijk lopende afwezigheid
</span>
</span>
</a>
</div>
<div class="mol-absences-card previous">
<div class="wrapper">
<div class="column">
<div class="time-block">
<span class="date">
12/04/2021
</span>
<span>
t/m
</span>
<span class="date">
12/04/2021
</span>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Gevraagde examens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div>
Gevraagde inhaalexamens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
<div class="amount text-green">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
<div class="amount text-red">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
<div class="amount text-black-500">
1
</div>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Afwezig onderwijsactiviteiten
</div>
<div class="amount">
1
</div>
</div>
</div>
</div>
<a href="#" class="atm-button button-red ">
<span>
<span class="text">
Bekijk lopende afwezigheid
</span>
</span>
</a>
</div>
</section>
</div>
</div>
<div class="tpl-mijn-afwezigheden">
<div class="uhasselt-container">
<div class="intro">
{{render '@app-breadcrumbs' heading-breadcrumbs merge=true}}
{{render '@app-heading--h1' heading-intro merge=true}}
{{render '@app-paragraph'}}
{{render '@app-button' heading-button merge=true}}
</div>
{{render '@app-procedure-slider'}}
{{render '@app-absences-overview--overview-ongoing'}}
{{render '@app-absences-overview--overview-previous'}}
</div>
</div>
{
"heading-breadcrumbs": {
"page": [
{
"isCurrent": false,
"link": {
"text": "Home"
}
},
{
"isCurrent": true,
"text": "Mijn afwezigheden melden"
}
]
},
"heading-intro": {
"text": "Mijn afwezigheden melden",
"tag": "div",
"modifier": "h1"
},
"heading-button": {
"text": "Nieuwe afwezigheid melden",
"iconBefore": false,
"iconAfter": {
"style": "fal",
"icon": "fa-chevron-circle-right"
}
}
}
.tpl-mijn-afwezigheden {
.uhasselt-container {
@apply py-8;
.intro {
@apply mb-16;
.mol-breadcrumbs {
@apply pb-8;
}
}
}
}
No notes defined.