UHasselt Component Library

App Absences Period 

<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='org-abcenses-period'>
    {{#if heading}}
        {{render '@app-heading--h2' heading merge=true}}
    {{/if}}
    <div class='wrapper'>
        <div class='col'>
            <div class='head'>Van</div>
            {{#if date-start}}
                <div>{{date-start}}</div>
            {{/if}}
            {{#if date-select-start}}
                <div>{{render '@app-date-picker'}}</div>
            {{/if}}
        </div>
        <div class='col'>
            <div class='head'>Tot/met</div>
            {{#if date-end}}
                <div>{{date-end}}</div>
            {{/if}}
            {{#if date-select-start}}
                <div>{{render '@app-date-picker'}}</div>
            {{/if}}
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Periode afwezigheid"
  },
  "date-start": "12 / 04 / 2021",
  "date-end": "13 / 04 / 2021"
}
  • Content: 
    .org-abcenses-period {
    .wrapper {
        @apply flex flex-col md:flex-row gap-8 md:gap-40;
        @apply p-8 bg-white border border-solid border-gray-700 shadow-xl;

        .col {
            @apply flex flex-col;

            .head {
                @apply font-bold mb-3;
            }
        }
    }
}
  • URL: /components/raw/app-absences-period/app-absences-period.css
  • Filesystem Path: src\components\09-app-organisms\app-absences-period\app-absences-period.css
  • Size: 327 Bytes

No notes defined.