Vebego Component Library

Vacancy Intro Block 

<section class="org-vacancy-intro-block">
    <div class="vebego-container">
        <div class="md:grid md:grid-cols-12 gap-8">
            <div class="md:col-span-4 pt-16">
                <div class="mol-title ">
                    <span class="atm-heading h-subtitle">Vacature</span>

                    <span class="atm-heading h1">E-Learning Specialist (m/w/d) - Erfurt</span>

                </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>
                <a class="atm-button atm-button-primary button-lg  ">
                    <span class="button-content">
                        <span>Solliciteer direct</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
            <div class="md:col-start-7 md:col-end-13">
                <div class="mol-intro-media">
                    <div class="intro-media-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
 
<section class="org-vacancy-intro-block">
    <div class="vebego-container">
        <div class="md:grid md:grid-cols-12 gap-8">
            {{#if image}}
            <div class="md:col-span-4 pt-16">
                {{render '@title' title}}
                {{render '@specs-list'}}
                {{#if paragraph}}
                {{render '@paragraph'}}
                {{/if}}
                {{#each buttonsPrimary}}
                {{render '@button-primary--lg' this merge=true}}
                {{/each}}
                {{#each buttonsSecondary}}
                {{render '@button-secondary--lg' this merge=true}}
                {{/each}}
            </div>
            <div class="md:col-start-7 md:col-end-13">
                {{render '@intro-media--image'}}
            </div>
            {{else}}
            <div class="md:col-start-3 md:col-end-11">
                {{render '@title' title}}
                {{render '@specs-list'}}
                {{#if paragraph}}
                {{render '@paragraph'}}
                {{/if}}
                {{#each buttonsPrimary}}
                {{render '@button-primary--lg' this merge=true}}
                {{/each}}
                {{#each buttonsSecondary}}
                {{render '@button-secondary--lg' this merge=true}}
                {{/each}}
            </div>
            {{/if}}
        </div>
    </div>
</section>
 
{
  "title": {
    "heading": {
      "tag": "span",
      "modifier": "h1",
      "text": "E-Learning Specialist (m/w/d) - Erfurt"
    },
    "subtitle": {
      "text": "Vacature"
    },
    "underline": false
  },
  "image": true,
  "buttonsPrimary": [
    {
      "text": "Solliciteer direct"
    }
  ]
}

No notes defined.