Vebego Component Library

Stats And Quote Block 

<section class='org-stats-and-quote-block'>
    <div class='vebego-container'>
        <div class='wrapper'>
            <div class='second'>
                <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 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="mol-counter">
                    <div class="counter-item">
                        <div class="number">

                            <span class="count-number">86</span>

                        </div>
                        <div class="text">medewerkers</div>
                    </div>
                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                    <div class="counter-item">
                        <div class="number">
                            +
                            <span class="count-number">245</span>

                        </div>
                        <div class="text">tevreden klanten</div>
                    </div>
                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                    <div class="counter-item">
                        <div class="number">

                            <span class="count-number">100</span>
                            %
                        </div>
                        <div class="text">aandacht voor jou</div>
                    </div>
                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </div>

            </div>
            <div class='first'>
                <div class="mol-quote">
                    <span class="atm-heading h4">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-icon  fas fa-quote-left   "></span>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class='org-stats-and-quote-block'>
    <div class='vebego-container'>
        <div class='wrapper'>
            <div class='second'>
                {{render '@title' title merge=true}}
                {{render '@paragraph'}}
                {{render '@counter'}}
            </div>
            {{#if quote}}
                <div class='first'>
                    {{render '@quote' quote merge=true}}
                </div>
            {{/if}}
        </div>
    </div>
</section>
 
{
  "quote": {}
}
  • Content: 
    .org-stats-and-quote-block {
    &.swapped {
        .wrapper {
            @screen md {
                grid-template: 'first second second';

                .first {
                    grid-area: second;
                }

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

    .wrapper {
        @apply grid;
        @apply gap-8;
        @apply md:gap-24;

        @screen md {
            grid-template: 'first first second';

            .first {
                grid-area: first;
            }

            .second {
                grid-area: second;
            }
        }

        .mol-title {
            @apply mb-8;
        }

        .first .atm-paragraph {
            @apply mb-8;
        }

        .second {
            @apply pr-20 md:pr-0;
        }
    }
}
  • URL: /components/raw/stats-and-quote-quote-block/stats-and-quote-quote-block.css
  • Filesystem Path: src\components\04-organisms\stats-and-quote-quote-block\stats-and-quote-quote-block.css
  • Size: 890 Bytes

No notes defined.