UHasselt Component Library

Vacancy item 

<section class='vacancy-item js--clickable'>
    <div class='wrap-info'>
        <h3 class="heading ">
            Zelfstandig academisch personeel Wiskundige epidemiologie
        </h3>
        <div class='paragraph '>Vacaturenummer: 201/31/074</div>

        <div class='paragraph '>Percentage: 100 %</div>

        <div class='paragraph '>Soliciteren t.e.m.: 31-08-2021</div>

    </div>
    <div>
        <a href="#" class="link " aria-label="" title="">

            <span class="text">Meer info en soliciteren</span>

        </a>

    </div>
</section>
 
<section class='vacancy-item {{#if cta}}js--clickable{{/if}}'>
    <div class='wrap-info'>
        {{render '@heading--h3' vacancy-title merge=true}}
        {{render '@paragraph' vacancy-number merge=true}}
        {{render '@paragraph' vacancy-percentage merge=true}}
        {{render '@paragraph' vacancy-date merge=true}}
    </div>
    <div>
        {{render '@link' cta}}
    </div>
</section>
 
{
  "vacancy-title": {
    "text": "Zelfstandig academisch personeel Wiskundige epidemiologie"
  },
  "vacancy-number": {
    "text": "Vacaturenummer: 201/31/074"
  },
  "vacancy-percentage": {
    "text": "Percentage: 100 %"
  },
  "vacancy-date": {
    "text": "Soliciteren t.e.m.: 31-08-2021"
  },
  "cta": {
    "text": "Meer info en soliciteren",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "#",
    "id": "",
    "icon": false
  }
}
  • Content: 
    .vacancy-item {
    @apply p-6 mb-4 border border-solid border-gray bg-white cursor-pointer;
    transition: 0.3s;
    @apply flex flex-col md:flex-row justify-between gap-4;

    &:hover {
        @apply shadow-lg;
    }

    .wrap-info {
    }

    ul {
        @apply mb-0;
    }

    .button {
        @apply whitespace-nowrap;
    }
}
  • URL: /components/raw/vacancy-item/vacancy-item.css
  • Filesystem Path: src\components\03-molecules\vacancy-item\vacancy-item.css
  • Size: 360 Bytes

No notes defined.