Skip to content

Countdown timer

The countdown-timer webcomponent is responsible for rendering a timer.

Attributes

Attribute name Type Default Description
id string null Unique module id, usually provided by moduleInstance variable
end-date string null Date towards which the countdown timer will be counting down.  
end-action string 'hide' Type of end action: 'hide' or 'showEndBanner'. Determines what happens when timer reaches zero.

Example

In this example we render a simple countdown timer.

HTML
<countdown-timer
    id="countdown-timer-123456"
    class="countdown-timer countdown-timer_small countdown-timer__position_center" 
    end-date="2030-05-24T11:00:00Z" 
    end-action="hide"
    tabindex="0" 
    role="timer"   
>
     <div class="countdown-timer__countdown" style="--timeUnitBackgroundColor: #000000; --borderRadius: 0; --textColor: #FFFFFF">
            <div class="countdown-timer__unit countdown-timer__unit_days countdown-timer__unit_with-background resetcss">
                <span class="countdown-timer__value" data-unit="days" aria-hidden="true">00</span>
                <span class="countdown-timer__label" aria-hidden="true">dni</span>
            </div>

            <div class="countdown-timer__unit countdown-timer__unit_hours countdown-timer__unit_with-background resetcss">
                <span class="countdown-timer__value" data-unit="hours" aria-hidden="true">00</span>
                <span class="countdown-timer__label" aria-hidden="true">godz.</span>
            </div>

            <div class="countdown-timer__unit countdown-timer__unit_minutes countdown-timer__unit_with-backgroundresetcss">
                <span class="countdown-timer__value" data-unit="minutes" aria-hidden="true">00</span>
                <span class="countdown-timer__label" aria-hidden="true">min.</span>
            </div>

            <div class="countdown-timer__unit countdown-timer__unit_seconds countdown-timer__unit_with-background resetcss">
                <span class="countdown-timer__value" data-unit="seconds" aria-hidden="true">00</span>
                <span class="countdown-timer__label" aria-hidden="true">sec.</span>
            </div>
        </div>
</countdown-timer>

Modules reference