Vebego Component Library
<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>
<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>
{
  "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
}
  • 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.