Vebego Component Library

Intro Block 

<!-- Image (Default) -->
<section class="org-intro-block swapped">
    <div class="vebego-container">
        <div class="md:grid md:grid-cols-12 gap-8">
            <div class="first col-span-5">
                <div class="mol-title title-underline">
                    <span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

            </div>
            <div class="second md:col-start-8 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>
    </div>


<!-- Slider -->
<section class="org-intro-block swapped">
    <div class="vebego-container">
        <div class="md:grid md:grid-cols-12 gap-8">
            <div class="first col-span-5">
                <div class="mol-title title-underline">
                    <span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

            </div>
            <div class="second md:col-start-8 md:col-end-13">
                <div class="mol-intro-media">
                    <div class="intro-media-slider">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="slide-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/231/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/232/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/234/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/235/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/236/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/237/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/238/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-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/239/768/768" alt="" loading="lazy">
                                        </picture>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-prev"><a class="atm-prev-next prev-next-prev" title="Vorige">
                                    <span class="atm-icon  fal fa-chevron-left  fa-md "></span>
                                </a>
                            </div>
                            <div class="swiper-next"><a class="atm-prev-next prev-next-next" title="Volgende">
                                    <span class="atm-icon  fal fa-chevron-right  fa-md "></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

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


<!-- Video -->
<section class="org-intro-block swapped">
    <div class="vebego-container">
        <div class="md:grid md:grid-cols-12 gap-8">
            <div class="first col-span-5">
                <div class="mol-title title-underline">
                    <span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

            </div>
            <div class="second md:col-start-8 md:col-end-13">
                <div class="mol-intro-media">
                    <div class="intro-media-video">
                        <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>
                        <a class="atm-play " title="Bekijk film" href="https://www.youtube.com/embed/L6LsRTfQGDo" data-fslightbox>
                            <span class="atm-icon  fal fa-play-circle  fa-md "></span>
                            <span class="text">
                                Bekijk film
                            </span>
                        </a>

                    </div>
                </div>

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


<section class="org-intro-block swapped">
    <div class="vebego-container">
        <div class="md:grid md:grid-cols-12 gap-8">
            <div class="first col-span-5">
                 {{render '@title' title merge=true}}
            </div>
            <div class="second md:col-start-8 md:col-end-13">
                {{#if video}}
                {{render '@intro-media--video'}}
                {{else if slider}}
                {{render '@intro-media--slider'}}
                {{else if image}}
                {{render '@intro-media--image'}}
                {{/if}}
            </div>
        </div>
    </div>
</div>
 
/* Image (Default) */
{
  "heading": {
    "text": "De schoonmakers van Nederland"
  },
  "paragraph": {
    "text": "Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland."
  },
  "image": true
}


/* Slider */
{
  "heading": {
    "text": "De schoonmakers van Nederland"
  },
  "paragraph": {
    "text": "Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland."
  },
  "slider": true
}


/* Video */
{
  "heading": {
    "text": "De schoonmakers van Nederland"
  },
  "paragraph": {
    "text": "Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland."
  },
  "video": true
}
  • Content: 
    .org-intro-block {
    @apply mb-24;

    &.swapped {
        @apply text-left;

        .vebego-container {
            @screen md {
                grid-auto-flow: dense;
                direction: rtl;

                .first {
                    direction: initial;
                    grid-column: span 5 / span 4;
                    @apply pt-16;
                }

                .atm-heading, .atm-paragraph, .atm-button{
                    direction: ltr;
                }
            }
        }
    }
}
  • URL: /components/raw/intro-block/intro-block.css
  • Filesystem Path: src\components\04-organisms\intro-block\intro-block.css
  • Size: 543 Bytes

No notes defined.