Vebego Component Library

Countdown Block 

<section class="org-countdown-block">
    <div class="vebego-container">
        <div class="mol-title ">
            <span class="atm-heading h-subtitle">Webinar</span>

            <span class="atm-heading h1">Smart tools in de schoonmaak</span>

        </div>

        <div class="wrapper-countdown-info">
            <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>
            <div>
                <div class="mol-countdown" data-endtime="2021-12-01T15:00:00">

                    <div class="countdown-item days">
                        <span class="value"></span>
                        <span class="label">dagen</span>
                    </div>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>

                    <div class="countdown-item hours">
                        <span class="value"></span>
                        <span class="label">uur</span>
                    </div>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>

                    <div class="countdown-item minutes">
                        <span class="value"></span>
                        <span class="label">minuten</span>
                    </div>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>

                    <div class="countdown-item seconds">
                        <span class="value"></span>
                        <span class="label">seconden</span>
                    </div>

                </div>

                <div class="wrapper-countdown-tag">
                </div>
            </div>
        </div>
        <div class="wrapper-countdown-buttons">
            <a class="atm-button atm-button-primary button-md  ">
                <span class="button-content">
                    <span>Lees de klantcase</span>

                </span>
                <span class="button-triangle"></span>
            </a>
            <a class="atm-button atm-button-secondary button-md ">
                <span class="button-content">
                    <span>Lees de klantcase</span>
                    <span class="atm-icon  far fa-long-arrow-right   "></span>
                </span>
                <span class="button-underline"></span>
            </a>

        </div>
    </div>
</section>
 
<section class="org-countdown-block">
    <div class="vebego-container">
        {{render '@title' title merge=true}}
        <div class="wrapper-countdown-info">
            <div>
                {{render '@paragraph'}}
            </div>
            <div>
                {{render '@countdown'}}
                <div class="wrapper-countdown-tag">
                    {{#each iconTags}}
                        {{render '@icon-tag'}}
                    {{/each}}
                </div>
            </div>
        </div>
        <div class="wrapper-countdown-buttons">
            {{render '@button-primary'}}{{render '@button-secondary'}}
        </div>
    </div>
</section>
 
{
  "title": {
    "underline": false,
    "subtitle": {
      "text": "Webinar"
    },
    "heading": {
      "text": "Smart tools in de schoonmaak"
    },
    "iconTags": [
      {},
      {}
    ]
  }
}
  • Content: 
    .org-countdown-block
{    
    .mol-title
    {
        @apply mb-10;
        @apply text-center;
    }

    .wrapper-countdown-info
    {
        @apply grid;
        @apply gap-16;
        @apply md:grid-cols-2;
        @apply mb-10;

        .wrapper-countdown-tag
        {
            @apply mt-6;
            @apply grid;
            @apply grid-flow-col;
            @apply text-center;

            .atm-tag
            {
                @apply mx-4;
            }
        }
    }

    .wrapper-countdown-buttons
    {
        @apply text-center;

        .atm-button
        {
            @apply mx-4;
        }
    }
}
  • URL: /components/raw/countdown-block/countdown-block.css
  • Filesystem Path: src\components\04-organisms\countdown-block\countdown-block.css
  • Size: 666 Bytes

No notes defined.