<div class="tpl-afwezigheid">
<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>
<a href="" class="atm-link " aria-label="" title="">
<span class="text">Mijn afwezigheid</span>
</a>
<span class="atm-icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
Afwezigheid
</li>
</ol>
</nav>
<div class="atm-heading h1">Afwezigheid</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>
</div>
<section class='org-abcenses-period'>
<h2 class="atm-heading ">Periode afwezigheid</h2>
<div class='wrapper'>
<div class='col'>
<div class='head'>Van</div>
<div>12 / 04 / 2021</div>
</div>
<div class='col'>
<div class='head'>Tot/met</div>
<div>13 / 04 / 2021</div>
</div>
</div>
</section>
<section class="overview-select-exams">
<div class="uhasselt-container">
<h2 class="atm-heading ">Selectie - Afwezig voor examens</h2>
<div class="wrapper">
<div class="atm-table-wrapper">
<div class="table-responsive">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
</td>
<td>
<p><span>Details inhaalexamen</span></p>
<p><span>Datum:</span>10/04/2021</p>
<p><span>Tijd:</span>10:00 uur</p>
<p><span>Lokaal:</span>OG-Aud1</p>
</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
</td>
<td>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</td>
<td>Row 3 Col 5</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
<td>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</td>
<td>Row 4 Col 5</td>
</tr>
</table>
</div>
<div class="table-list">
<ul>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 1 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 1 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 1 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>
<p>Details inhaalexamen</p>
<p><span>Datum:</span>10/04/2021</p>
<p><span>Tijd:</span>10:00 uur</p>
<p><span>Lokaal:</span>OG-Aud1</p>
</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 2 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 2 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 2 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 3 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 3 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 3 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>Row 3 Col 5</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 4 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 4 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 4 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>Row 4 Col 5</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class='overview-select-exams'>
<div class='uhasselt-container'>
<h2 class="atm-heading ">Selectie - afwezig voor onderwijsactiviteit</h2>
<div class='wrapper'>
<div class="atm-table-wrapper">
<div class="table-responsive">
<div class='title'>
<h4 class="atm-heading ">Biologie</h4>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<table>
<tr>
<th>Werkvorm</th>
<th>Datum</th>
<th>Omschrijving</th>
</tr>
<tr>
<td>Labo</td>
<td>10 / 06 /2021</td>
<td>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</td>
</tr>
<tr>
<td>Case study</td>
<td>10 / 06 /2021</td>
<td>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</td>
</tr>
</table>
</div>
<div class="table-list">
<div class='title'>
<h3 class="atm-heading ">Biologie</h3>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<ul>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Labo</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<div>10 / 06 /2021</div>
</div>
<div class="item">
<div><span>Omschrijving</span></div>
<div>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Case study</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<div>10 / 06 /2021</div>
</div>
<div class="item">
<div><span>Omschrijving</span></div>
<div>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="atm-table-wrapper">
<div class="table-responsive">
<div class='title'>
<h4 class="atm-heading ">Biologie</h4>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<table>
<tr>
<th>Werkvorm</th>
<th>Datum</th>
<th>Omschrijving</th>
</tr>
<tr>
<td>Labo</td>
<td>10 / 06 /2021</td>
<td>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</td>
</tr>
<tr>
<td>Case study</td>
<td>10 / 06 /2021</td>
<td>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</td>
</tr>
</table>
</div>
<div class="table-list">
<div class='title'>
<h3 class="atm-heading ">Biologie</h3>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<ul>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Labo</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<div>10 / 06 /2021</div>
</div>
<div class="item">
<div><span>Omschrijving</span></div>
<div>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Case study</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<div>10 / 06 /2021</div>
</div>
<div class="item">
<div><span>Omschrijving</span></div>
<div>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="org-akte-overview">
<h2 class="atm-heading ">Mijn attesten</h2>
<div>
<div class='mol-akte-card '>
<div class='item'>
<div class='img'>
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='56' viewBox='0 0 72 56' fill='none'>
<path d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z' fill='black'></path>
</svg>
</div>
</div>
<div class='item'>
<div class='img'>
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='56' viewBox='0 0 72 56' fill='none'>
<path d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z' fill='black'></path>
</svg>
</div>
</div>
<div class='item'>
<div class='img'>
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='56' viewBox='0 0 72 56' fill='none'>
<path d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z' fill='black'></path>
</svg>
</div>
</div>
</div>
</div>
</section>
</div>
<section class='org-footer-edit'>
<div class='uhasselt-container'>
<div> <a href="#" class="atm-button button-red ">
<span>
<span class="text">
Afwezigheid opslaan
</span>
</span>
</a>
</div>
<div> <a href="#" class="atm-button button-white ">
<span>
<span class="text">
Annuleren
</span>
</span>
</a>
</div>
<div class='button-remove'> <a href="#" class="atm-button button-white ">
<span>
<span class="atm-icon fal fa-trash-alt " aria-hidden="true"></span>
<span class="text">
Melding afwezigheid volledig verwijderen
</span>
</span>
</a>
</div>
</div>
</section>
</div>
<div class="tpl-afwezigheid">
<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'}}
</div>
{{render '@app-absences-period'}}
{{render '@app-overview-select-exams'}}
{{render '@app-overview-select-educational'}}
{{render '@app-akte-overview'}}
</div>
{{render '@app-footer-edit'}}
</div>
{
"heading-breadcrumbs": {
"page": [
{
"isCurrent": false,
"link": {
"text": "Home"
}
},
{
"isCurrent": false,
"link": {
"text": "Mijn afwezigheid"
}
},
{
"isCurrent": true,
"text": "Afwezigheid"
}
]
},
"heading-intro": {
"text": "Afwezigheid",
"tag": "div",
"modifier": "h1"
}
}
.tpl-afwezigheid {
.uhasselt-container {
@apply py-8;
.intro {
@apply mb-16;
.mol-breadcrumbs {
@apply pb-8;
}
}
}
}
No notes defined.