Vebego Component Library
<div class="tpl-homepage">
    <div class="vebego-container">
        <div class="content-block">
            <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>
    </div>
    <div class="content-block">
        <section class='org-usp-block'>
            <div class='vebego-container'>
                <div class='first'>
                    <h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>

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

                </div>
                <div class='second'>
                    <ul class="mol-usp-list">
                        <li>
                            <span class="atm-icon  fas fa-check-circle   "></span>
                            <div>
                                <div class="atm-heading h5">Advies op maat</div>

                                Wij ontzorgen uw organisatie en denken mee.
                            </div>
                        </li>
                        <li>
                            <span class="atm-icon  fas fa-check-circle   "></span>
                            <div>
                                <div class="atm-heading h5">Gedreven professionals</div>

                                Met meer dan 75 jaar ervaring staan onze professionals voor u klaar.
                            </div>
                        </li>
                        <li>
                            <span class="atm-icon  fas fa-check-circle   "></span>
                            <div>
                                <div class="atm-heading h5">Positieve bijdrage</div>

                                Iedere dag dragen we bij aan een betere wereld.
                            </div>
                        </li>
                        <li>
                            <span class="atm-icon  fas fa-check-circle   "></span>
                            <div>
                                <div class="atm-heading h5">Positieve bijdrage</div>

                                Iedere dag dragen we bij aan een betere wereld.
                            </div>
                        </li>
                        <li>
                            <span class="atm-icon  fas fa-check-circle   "></span>
                            <div>
                                <div class="atm-heading h5">Positieve bijdrage</div>

                                Iedere dag dragen we bij aan een betere wereld.
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
    <div class="content-block">
        <section class="org-segment-block">
            <div class="vebego-container">
                <div class="mol-title ">
                    <span class="atm-heading h-subtitle">Sterk als collectief</span>

                    <span class="atm-heading h1">Samen zijn wij de schoonmakers van ...</span>

                </div>

            </div>
            <div class="mol-segment-slider">
                <div class="swiper-container">
                    <div class="vebego-container">
                        <div class="pagination">
                            <div class="swiper-prev"><span class="atm-icon  fal fa-long-arrow-left  fa-2x "></span></div>
                            <div class="swiper-next"><span class="atm-icon  fal fa-long-arrow-right  fa-2x "></span></div>
                        </div>
                    </div>

                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="atm-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/232/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/234/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/235/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/236/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/237/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/238/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/239/263/360" alt="">
                                </picture>
                                <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-segment js--clickable">
                                <span class="atm-heading h5">... consumerend Nederland</span>

                                <picture class="atm-image ">
                                    <img class="" src="https://picsum.photos/id/240/263/360" alt="">
                                </picture>
                                <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 class="swiper-pagination"></div>
                </div>
            </div>
            <div class="vebego-container text-center">
                <a class="atm-button atm-button-primary button-md  ">
                    <span class="button-content">
                        <span class="atm-icon  fal fa-map   "></span>
                        <span>Bekijk alle segmenten</span>
                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </section>
    </div>
    <div class="content-block">
        <section class="org-blog-teasers">
            <div class="vebego-container">
                <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">Verhalen van de werkvloer</span>

                </div>

                <div class="wrapper">
                    <div class="first">
                        <div class="atm-paragraph text-md">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.</div>

                        <a class="atm-button atm-button-primary button-md  ">
                            <span class="button-content">
                                <span>Button 1</span>

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

                        <a class="atm-button atm-button-secondary button-md ">
                            <span class="button-content">
                                <span>Button 2</span>
                                <span class="atm-icon  far fa-long-arrow-right   "></span>
                            </span>
                            <span class="button-underline"></span>
                        </a>

                        <a class="atm-button atm-button-secondary button-md ">
                            <span class="button-content">
                                <span>Button 3</span>
                                <span class="atm-icon  far fa-long-arrow-right   "></span>
                            </span>
                            <span class="button-underline"></span>
                        </a>

                    </div>
                    <div>
                        <div class="mol-card-extended  js--clickable">
                            <picture class="atm-image ">
                                <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                            </picture>
                            <div>
                                <span class="atm-heading h-subtitle">FM Trends</span>

                                <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

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

                                <div class="reading-time">
                                    <span class="atm-icon  far fa-eye  fa-sm "></span>
                                    <span class="text">8 minuten</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 class="mol-card-extended  js--clickable">
                            <picture class="atm-image ">
                                <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                            </picture>
                            <div>
                                <span class="atm-heading h-subtitle">FM Trends</span>

                                <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

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

                                <div class="reading-time">
                                    <span class="atm-icon  far fa-eye  fa-sm "></span>
                                    <span class="text">8 minuten</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 class="mol-card-extended  js--clickable">
                            <picture class="atm-image ">
                                <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                            </picture>
                            <div>
                                <span class="atm-heading h-subtitle">FM Trends</span>

                                <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

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

                                <div class="reading-time">
                                    <span class="atm-icon  far fa-eye  fa-sm "></span>
                                    <span class="text">8 minuten</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>
        </section>
    </div>
</div>
</div>
<div class="tpl-homepage">
    <div class="vebego-container">
        <div class="content-block">
            {{render '@intro-block'}}
        </div>
        <div class="content-block">
            {{render '@usp-block'}}
        </div>
        <div class="content-block">
            {{render '@segment-block'}}
        </div>
        <div class="content-block">
            {{render '@blog-teasers'}}
        </div>
    </div>
</div>
/* No context defined. */

No notes defined.