Vebego Component Library

Usp Block: With Image (Default) 

<section class='org-usp-block'>
    <div class='vebego-container with-image'>
        <div class="usp-content">
            <div class="intro">
                <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="list-items">
                <ul class="mol-usp-list">
                    <li>
                        <i class="atm-icon  fa fa-regular fa-road   "></i>

                        <div>
                            <div class="atm-heading h5">Advies op maat</div>

                            Wij ontzorgen uw organisatie en denken mee.
                        </div>
                    </li>
                    <li>
                        <i class="atm-icon  fa fa-regular fa-road   "></i>

                        <div>
                            <div class="atm-heading h5">Gedreven professionals</div>

                            Met meer dan 75 jaar ervaring staan onze professionals voor u klaar.
                        </div>
                    </li>
                    <li>
                        <i class="atm-icon  fa fa-regular fa-road   "></i>

                        <div>
                            <div class="atm-heading h5">Positieve bijdrage</div>

                            Iedere dag dragen we bij aan een betere wereld.
                        </div>
                    </li>
                    <li>
                        <i class="atm-icon  fa fa-regular fa-road   "></i>

                        <div>
                            <div class="atm-heading h5">Positieve bijdrage</div>

                            Iedere dag dragen we bij aan een betere wereld.
                        </div>
                    </li>
                    <li>
                        <i class="atm-icon  fa fa-regular fa-road   "></i>

                        <div>
                            <div class="atm-heading h5">Positieve bijdrage</div>

                            Iedere dag dragen we bij aan een betere wereld.
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="image">
            <picture class="atm-image ">
                <img class="" src="https://picsum.photos/id/250/768/432" alt="">
            </picture>
        </div>
    </div>
</section>
 
<section class='org-usp-block'>
    <div class='vebego-container {{modifier}}'>
        <div class="usp-content">
            <div class="intro">
                {{render '@heading'}}
                {{render '@paragraph'}}
            </div>
            <div class="list-items">
                {{render '@usp-list'}}
            </div>   
        </div>
        {{#if image}}
            <div class="image">
                {{render "@image" image}}
            </div>
        {{/if}}
    </div>
</section>
 
{
  "modifier": "with-image",
  "image": {
    "src": "https://picsum.photos/id/250/768/432"
  }
}
  • Content: 
    .org-usp-block {
    @apply md:relative md:h-full md:w-full;

    .vebego-container {
        .intro .atm-heading {
            @apply text-secondary-col-1;
        }

        &.with-image {
            @apply lg:grid lg:grid-cols-12 md:gap-6;

            .usp-content {
                @apply col-span-6;

                .mol-usp-list{
                    @apply grid-cols-1 gap-y-8;
                }
            }
            
            .image {
                @apply col-span-6 mt-4 md:mt-0;

                picture,
                picture img {
                    @apply w-full md:h-full;
                }

                picture img {
                    @apply md:object-cover;
                }
            }
        }
    }

    &.swapped {
        .vebego-container {
            .usp-content {
                @apply order-2 col-end-13;
            }

            .image {
                @apply order-1 col-end-auto;
            }
        }
    }
}
  • URL: /components/raw/usp-block/usp-block.css
  • Filesystem Path: src\components\04-organisms\usp-block\usp-block.css
  • Size: 1 KB

No notes defined.