Vebego Component Library

Usp 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>
 
<section class='org-usp-block'>
    <div class='vebego-container'>
        <div class='first'>
            {{render '@heading'}}
            {{render '@paragraph'}}
        </div>
        <div class='second'>
            {{render '@usp-list'}}
        </div>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    .org-usp-block {
    @apply md:relative md:h-full md:w-full;

    &.swapped {
        @screen md {
            &:after {
                content: '';
                position: absolute;
                width: 30%;
                height: 100%;
                z-index: -1;
                top: 0;
                right: 0;
                left: unset;
                @apply bg-primary-100;
            }

            .vebego-container {
                grid-template: 'first second second';

                .first {
                    grid-area: second;
                }

                .second {
                    grid-area: first;
                }
            }
        }
    }

    @screen md {
        &:after {
            content: '';
            position: absolute;
            width: 30%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
            @apply bg-primary-100;
        }
    }

    .vebego-container {
        @apply flex flex-col gap-8;

        .first {
            @apply bg-primary-100;
            @apply pl-10 md:pl-0;
            @apply pr-10;
            @apply py-8;
            @apply h-full;
            @apply flex;
            @apply flex-col;
            @apply justify-center;
        }

        @apply md:grid;
        @screen md {
            grid-template: 'first first second';
            .first {
                @apply pl-32;
                @apply pr-24;
                grid-area: first;
            }

            .second {
                grid-area: second;
            }
        }
    }
}
  • URL: /components/raw/usp-block/usp-block.css
  • Filesystem Path: src\components\04-organisms\usp-block\usp-block.css
  • Size: 1.7 KB

No notes defined.