Vebego Component Library

Steps Block 

<div class="mol-steps-block">
    <div class="swiper-top">
        <div class="slider-heading">
            <h2 class="atm-heading ">Zo gemakkelijk is solliciteren</h2>

        </div>
    </div>
    <div class="mol-step-slider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="atm-step">
                        <div class="atm-badge ">Stap 1</div>

                        <h5 class="atm-heading ">Solliciteer hier!</h5>

                        <div class="atm-paragraph text-md">Gebruik het formulier op deze pagina! We reageren binnen 2 werkdagen op jouw sollicitatie!</div>

                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-step">
                        <div class="atm-badge ">Stap 1</div>

                        <h5 class="atm-heading ">We bellen je</h5>

                        <div class="atm-paragraph text-md">We stellen je een aantal vragen om te kijken of de functie bij je past.</div>

                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-step">
                        <div class="atm-badge ">Stap 1</div>

                        <h5 class="atm-heading ">Eerste gesprek</h5>

                        <div class="atm-paragraph text-md">Is het een match? Ontmoet je toekomstige collega's en vraag ze alles wat je wilt.</div>

                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-step">
                        <div class="atm-badge ">Stap 1</div>

                        <h5 class="atm-heading ">Welkom bij het team!</h5>

                        <div class="atm-paragraph text-md">Je bent aangenomen! We zorgen voor een goede onboarding zodat je snel aan de slag kunt.</div>

                    </div>

                </div>
            </div>
        </div>
        <div class="pagination">
            <div class="swiper-pagination"></div>
            <div>
                <div class="swiper-prev"> <i class="atm-icon  far fa-chevron-left   "></i>
                </div>
                <div class="swiper-next"> <i class="atm-icon  far fa-chevron-right   "></i>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-steps-block">
  <div class="swiper-top">
    <div class="slider-heading">
      {{render '@heading' heading merge=true}}
    </div>
  </div>
  {{render '@step-slider' this merge=true}}
</div>
 
{
  "heading": {
    "text": "Zo gemakkelijk is solliciteren",
    "tag": "h2"
  }
}
  • Content: 
    .org-steps-block {
    @apply overflow-hidden;

    .swiper-top {
        @apply mb-10;

        .atm-heading {
            @apply text-secondary-col-1;
        }
    }
}
  • URL: /components/raw/steps-block/steps-block.css
  • Filesystem Path: src\components\04-organisms\steps-block\steps-block.css
  • Size: 182 Bytes

No notes defined.