Vebego Component Library

Showcase Block: default 

<section class="org-showcase-block default">
    <div class="vebego-container org-showcase-block--header">
        <h2 class="atm-heading ">Onze tools</h2>

    </div>

    <div class="vebego-container org-showcase-block--wrapper">
        <div class="mol-showcase">
            <div class="swiper-container swiper-image-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/10/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/10/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/10/263/360" alt="" loading="lazy">
                        </picture>
                    </div>
                    <div class="swiper-slide">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/200/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/200/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/200/263/360" alt="" loading="lazy">
                        </picture>
                    </div>
                    <div class="swiper-slide">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/100/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/100/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/100/263/360" alt="" loading="lazy">
                        </picture>
                    </div>
                    <div class="swiper-slide">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/10/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/10/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/10/263/360" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>

                <div class="swiper-pagination"></div>
            </div>
            <div class="showcase--content">
                <div class="swiper-navigation">
                    <a class="atm-button atm-button-primary  swiper-prev  button-icon-only ">
                        <div class="button-content-wrapper">
                            <span class="button-content">

                                <i class="atm-icon  fa-regular fa-chevron-left   "></i>

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

                    <a class="atm-button atm-button-primary  swiper-next  button-icon-only ">
                        <div class="button-content-wrapper">
                            <span class="button-content">

                                <i class="atm-icon  fa-regular fa-chevron-right   "></i>

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

                </div>
                <div class="swiper-container swiper-text-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="atm-paragraph text-md">Maecenas sit amet vulputate sapien. Cras vel enim non mauris bibendum tincidunt vel lacinia ipsum. Sed eu placerat neque. onec ultrices metus in risus auctor feugiat. Vivamus quis nibh elementum, iaculis augue quis, tristique quam.</div>

                        </div>
                        <div class="swiper-slide">
                            <div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis felis vel sem eleifend dapibus. Curabitur sed tempus mauris, nec malesuada libero. Ut volutpat est ut tortor vulputate, id porta ligula tristique. Quisque pharetra sapien mauris, sit amet maximus elit laoreet et.</div>

                        </div>
                        <div class="swiper-slide">
                            <div class="atm-paragraph text-md">Vivamus vitae urna elementum, lacinia lorem et, posuere lorem. Aliquam sagittis, dui sit amet aliquet euismod, mauris ex mollis diam, quis cursus felis nisi rutrum neque. Proin velit arcu, consectetur eget risus id, blandit tristique sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>

                        </div>
                        <div class="swiper-slide">
                            <div class="atm-paragraph text-md">Maecenas sit amet vulputate sapien. Cras vel enim non mauris bibendum tincidunt vel lacinia ipsum. Sed eu placerat neque. onec ultrices metus in risus auctor feugiat. Vivamus quis nibh elementum, iaculis augue quis, tristique quam.</div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="org-showcase-block--content">
            <h2 class="atm-heading ">The quick brown fox jumps over the lazy dog</h2>

            <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>

            <a class="atm-button atm-button-primary  button-md no-icon  ">
                <div class="button-content-wrapper">
                    <span class="button-content">
                        <span>Lees meer</span>
                        <i class="atm-icon  fal fa-arrow-right   "></i>

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

        </div>
    </div>
    </div>
 
<section class="org-showcase-block {{modifier}}">
  <div class="vebego-container org-showcase-block--header">
    {{render '@heading--h2' title merge=true}}
  </div>
  
  <div class="vebego-container org-showcase-block--wrapper">
    {{render "@showcase"}}

    <div class="org-showcase-block--content">
      {{render "@heading--h2"}}
      {{render "@paragraph"}}
      {{render "@button-primary" button merge=true}}
    </div>
  </div>
</div>
 
{
  "modifier": "default",
  "title": {
    "text": "Onze tools"
  },
  "button": {
    "text": "Lees meer"
  }
}
  • Content: 
    .org-showcase-block {
    &--header {
        .atm-heading {
            @apply text-secondary-col-1;
        }
    }

    &--wrapper {
        @apply xl:grid grid-cols-2 gap-x-16 items-center;
    }

    &.reversed{ 
        .mol-showcase{
            @apply order-1
        }
    }

}
  • URL: /components/raw/showcase-block/showcase-block.css
  • Filesystem Path: src\components\04-organisms\showcase-block\showcase-block.css
  • Size: 305 Bytes

No notes defined.