Vebego Component Library
<section class="org-segment-block">
    <div class="vebego-container">
        <div class="mol-title ">
            <span class="atm-heading h-subtitle">Sterk als collectief</span>

            <span class="atm-heading h1">Samen zijn wij de schoonmakers van ...</span>

        </div>

    </div>
    <div class="mol-segment-slider">
        <div class="swiper-container">
            <div class="vebego-container">
                <div class="pagination">
                    <div class="swiper-prev"><span class="atm-icon  fal fa-long-arrow-left  fa-2x "></span></div>
                    <div class="swiper-next"><span class="atm-icon  fal fa-long-arrow-right  fa-2x "></span></div>
                </div>
            </div>

            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/232/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/234/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/235/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/236/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/237/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/238/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/239/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-segment js--clickable">
                        <span class="atm-heading h5">... consumerend Nederland</span>

                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/id/240/263/360" alt="">
                        </picture>
                        <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                    </div>

                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="vebego-container text-center">
        <a class="atm-button atm-button-primary button-md  ">
            <span class="button-content">
                <span class="atm-icon  fal fa-map   "></span>
                <span>Bekijk alle segmenten</span>
            </span>
            <span class="button-triangle"></span>
        </a>

    </div>
</section>
<section class="org-segment-block">
    <div class="vebego-container">
        {{ render '@title' title merge=true}}
    </div>
    {{ render '@segment-slider' }}
    <div class="vebego-container text-center">
        {{ render '@button-primary--icon-left-md' button merge=true }}
    </div>
</section>
{
  "title": {
    "heading": {
      "text": "Samen zijn wij de schoonmakers van ..."
    },
    "subtitle": {
      "text": "Sterk als collectief"
    },
    "underline": false
  },
  "button": {
    "text": "Bekijk alle segmenten",
    "icon": {
      "style": "fal",
      "icon": "fa-map"
    }
  }
}

No notes defined.