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>
 
<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."
  },
  "image": 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.