Vebego Component Library

Vacancy Block 

<section class="org-vacancy-block js--clickable">
    <div class="atm-heading h4">E-Learning Specialist (m/w/d) - Erfurt</div>

    <div class="mol-specs-list">
        <ul>
            <li>
                <span class="atm-icon  fas fa-circle  fa-xs "></span>
                Locatie
            </li>
            <li>
                <span class="atm-icon  fas fa-circle  fa-xs "></span>
                Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
            </li>
            <li>
                <span class="atm-icon  fas fa-circle  fa-xs "></span>
                Aantal uren
            </li>
            <li>
                <span class="atm-icon  fas fa-circle  fa-xs "></span>
                Salaris
            </li>
        </ul>
    </div>
    <div class="atm-paragraph text-md">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
    </div>

    <span class="atm-icon  far fa-chevron-right   "></span>
    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</section>
 
<section class="org-vacancy-block {{#if link}}js--clickable{{/if}}">
    {{ render '@heading' heading merge=true}}
    {{ render '@specs-list' }}
    {{ render '@paragraph'}}
    {{ render '@icon' icon merge=true}}
    {{#if link}}
        {{render '@link'}}
    {{/if}}
</section>
 
{
  "heading": {
    "tag": "div",
    "modifier": "h4",
    "text": "E-Learning Specialist (m/w/d) - Erfurt"
  },
  "link": {},
  "icon": {
    "icon": "fa-chevron-right"
  }
}
  • Content: 
    .org-vacancy-block {
    @apply bg-white;
    @apply p-10;
    @apply pr-20;
    @apply lg:pr-44;
    @apply relative hover:bg-cta transition duration-150 ease-in-out;

    &:hover {
        @apply text-white;

        > .atm-icon {
            @apply right-8;
        }

        > .atm-icon::before {
            @apply text-white;
        }

        li span::before {
            @apply text-white;
        }

        .mol-specs-list ul li,
        .atm-heading {
            @apply text-white;
        }
    }

    .mol-specs-list {
        @apply mb-2;
    }

    .atm-paragraph p {
        @apply m-0;
    }

    .atm-link {
        @apply hidden;
    }

    > .atm-icon {
        @apply absolute;
        top: 45%;
        @apply right-10;
        @apply text-cta;
    }
}
  • URL: /components/raw/vacancy-block/vacancy-block.css
  • Filesystem Path: src\components\04-organisms\vacancy-block\vacancy-block.css
  • Size: 826 Bytes

No notes defined.