UHasselt Component Library

Educations accordion 

<div class='educations-accordion '>
    <details>
        <summary>
            <div class='wrapper'>
                <h4 class="heading ">
                    Academiejaar 2020 - 2021
                </h4>
                <span class="icon fal fa-plus-square  fa-lg icon-plus" aria-hidden="true"></span>
                <span class="icon fal fa-minus-square  fa-lg icon-minus" aria-hidden="true"></span>
            </div>
        </summary>
        <div class='card-body'>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </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>

                <span class="icon far fa-external-link   " aria-hidden="true"></span>
            </a>

        </div>
    </details>
    <details>
        <summary>
            <div class='wrapper'>
                <h4 class="heading ">
                    Academiejaar 2019-2020
                </h4>
                <span class="icon fal fa-plus-square  fa-lg icon-plus" aria-hidden="true"></span>
                <span class="icon fal fa-minus-square  fa-lg icon-minus" aria-hidden="true"></span>
            </div>
        </summary>
        <div class='card-body'>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>

        </div>
    </details>
    <details>
        <summary>
            <div class='wrapper'>
                <h4 class="heading ">
                    Academiejaar 2018-2019
                </h4>
                <span class="icon fal fa-plus-square  fa-lg icon-plus" aria-hidden="true"></span>
                <span class="icon fal fa-minus-square  fa-lg icon-minus" aria-hidden="true"></span>
            </div>
        </summary>
        <div class='card-body'>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>
            <div class="link-block js--clickable">
                <div class="wrapper-link-block">

                    <div class="title-wrap">
                        <span class="number-id">3461</span>

                        <h4 class="heading ">
                            Basisvaardigheden in de chemie
                        </h4>
                    </div>

                    <div>Lid van het onderwijsteam</div>

                </div>

                <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
                    <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
                </a>
            </div>

        </div>
    </details>
</div>
 
<div class='educations-accordion {{modifier}}'>
    {{#each items}}
        <details>
            <summary>
                <div class='wrapper'>
                    {{render '@heading--h4' heading merge=true}}
                    {{render '@icon' @root.icon-plus}}
                    {{render '@icon' @root.icon-minus}}
                </div>
            </summary>
            <div class='card-body'>
                {{#each item}}
                    {{render '@link-block--courses'}}
                {{/each}}
                {{#if link-external}}{{render '@link--external'}}{{/if}}
            </div>
        </details>
    {{/each}}
</div>
 
{
  "icon-plus": {
    "style": "fal",
    "icon": "fa-plus-square",
    "modifier": "icon-plus",
    "size": "fa-lg"
  },
  "icon-minus": {
    "style": "fal",
    "icon": "fa-minus-square",
    "modifier": "icon-minus",
    "size": "fa-lg"
  },
  "items": [
    {
      "heading": {
        "text": "Academiejaar 2020 - 2021"
      },
      "index": "1",
      "item": [
        {},
        {},
        {}
      ],
      "link-external": true
    },
    {
      "heading": {
        "text": "Academiejaar 2019-2020"
      },
      "index": "2",
      "item": [
        {},
        {},
        {}
      ]
    },
    {
      "heading": {
        "text": "Academiejaar 2018-2019"
      },
      "index": "3",
      "item": [
        {},
        {},
        {}
      ]
    }
  ]
}
  • Content: 
    .educations-accordion {
    details {
        @apply border border-solid border-gray overflow-auto border-b-0;

        &:last-child {
            @apply border-b;
        }

        .wrapper {
            @apply cursor-pointer list-none p-4 pb-3 flex justify-between text-left w-full;

            h4.heading {
                @apply font-semibold m-0;
            }
        }

        summary {
            & > * {
                @apply inline;
            }

            .icon {
                @apply mt-1 ml-4;
            }

            .icon-plus {
                @apply inline;
            }

            .icon-minus {
                @apply hidden;
            }

            &:focus {
                outline: 0 !important;
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
            }
        }

        .card-body {
            @apply p-4 pt-0;

            .link {
                @apply my-4;
            }
        }

        &[open] {
            summary {
                .icon-plus {
                    @apply hidden;
                }

                .icon-minus {
                    @apply inline;
                }
            }
        }
    }
}
  • URL: /components/raw/educations-accordion/educations-accordion.css
  • Filesystem Path: src\components\04-organisms\educations-accordion\educations-accordion.css
  • Size: 1.2 KB

No notes defined.