Vebego Component Library

Slider Extended Block 

<section class="org-slider-extended-block">
    <div class="vebego-container">
        <div class="slider-left">
            <div class="slider-heading">
                <h2 class="atm-heading ">Samen zijn wij de schoonmakers van ...</h2>

            </div>
            <div class="slider-paragraph">
                <div class="atm-paragraph text-md">Sterk als collectief</div>

            </div>
            <div class="mt-8">
                <a class="atm-button atm-button-primary  button-md icon-right   ">
                    <div class="button-content-wrapper">
                        <span class="button-content">
                            <span>Meer weten</span>
                            <i class="atm-icon  fal fa-chevron-right   "></i>

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

            </div>
        </div>
        <div class="slider-right">
            <div class="mol-slider-extended">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="atm-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Advies</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">De beste service</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/232/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/234/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Interim</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Uitbesteding</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/235/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Project management</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Uitdaging</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/236/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Advies</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">De beste service</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/237/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/238/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Interim</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Uitbesteding</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/239/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Project management</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Uitdaging</span>
                                    </div>
                                </div>
                                <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-slide--extended js--clickable">
                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/240/263/360" alt="">
                                </picture>
                                <div class="slide-content">
                                    <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                                    </div>
                                    <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                                    </div>
                                </div>
                                <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>
                <div class="pagination">
                    <div class="swiper-pagination"></div>
                    <div>
                        <div class="swiper-prev"> <i class="atm-icon  fa-solid fa-long-arrow-left   "></i>
                        </div>
                        <div class="swiper-next"> <i class="atm-icon  fa-solid fa-long-arrow-right  fa-md "></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="org-slider-extended-block">
    <div class="vebego-container">
    <div class="slider-left">
        <div class="slider-heading">
            {{render '@heading' heading merge=true}}
        </div>
        <div class="slider-paragraph">
            {{render '@paragraph' paragraph merge=true}}
        </div>
        <div class="mt-8">
            {{render '@button-primary--icon-md' button merge=true}}
        </div>
    </div>
    <div class="slider-right">
        {{render '@slider-extended' this merge=true}}
    </div></div>
</section>
 
{
  "heading": {
    "text": "Samen zijn wij de schoonmakers van ...",
    "tag": "h2"
  },
  "paragraph": {
    "text": "Sterk als collectief"
  },
  "button": {
    "text": "Meer weten",
    "icon": {
      "style": "fal",
      "icon": "fa-chevron-right"
    }
  },
  "slides": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      },
      "heading": {
        "text": "Advies",
        "tag": "span"
      },
      "subHeading": {
        "text": "De beste service",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/232/263/360"
      },
      "heading": {
        "text": "Uitbesteding",
        "tag": "span"
      },
      "subHeading": {
        "text": "Keuzes",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/234/263/360"
      },
      "heading": {
        "text": "Interim",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitbesteding",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/235/263/360"
      },
      "heading": {
        "text": "Project management",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitdaging",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/236/263/360"
      },
      "heading": {
        "text": "Advies",
        "tag": "span"
      },
      "subHeading": {
        "text": "De beste service",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/237/263/360"
      },
      "heading": {
        "text": "Uitbesteding",
        "tag": "span"
      },
      "subHeading": {
        "text": "Keuzes",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/238/263/360"
      },
      "heading": {
        "text": "Interim",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitbesteding",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/239/263/360"
      },
      "heading": {
        "text": "Project management",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitdaging",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/240/263/360"
      },
      "heading": {
        "text": "Uitbesteding",
        "tag": "span"
      },
      "subHeading": {
        "text": "Keuzes",
        "tag": "span"
      }
    }
  ]
}
  • Content: 
    .org-slider-extended-block {
    @apply relative overflow-hidden py-8;

    .vebego-container {
        @apply flex lg:flex-nowrap flex-wrap;
    }
    .slider-left {
        @apply w-full mb-8;

        .atm-heading {
            @apply text-secondary-col-1;
        }

        .slider-paragraph {
            @apply my-4;
        }
    }

    .slider-right {
        @apply w-full;
    }

    .slider-heading .atm-heading {
        @apply mb-0 text-secondary-col-1;
    }

    .mol-slider-slider {
        @apply mb-12;
    }

    @screen lg {
        @apply flex items-start;

        .slider-left {
            @apply w-1/3 mr-8 mb-0;
        }

        .slider-right {
            @apply w-2/3;
        }
    }
}
  • URL: /components/raw/slider-extended-block/slider-extended-block.css
  • Filesystem Path: src\components\04-organisms\slider-extended-block\slider-extended-block.css
  • Size: 760 Bytes

No notes defined.