Countdown timer¶

Use .countdown-timer element to style elements related to the countdown timer module.

Structurally .countdown-timer contains following elements:

.countdown-timer__overlay
.countdown-timer__active
.countdown-timer__ended
.countdown-timer__description
.countdown-timer__countdown
.countdown-timer__unit
.countdown-timer__value
.countdown-timer__label
.countdown-timer__button

It also contains following class modifiers:

.countdown-timer_small, .countdown-timer_medium, .countdown-timer_large
.countdown-timer__position_top-left, .countdown-timer__position_top-center, .countdown-timer__position_top-right
.countdown-timer__position_center-left, .countdown-timer__position_center, .countdown-timer__position_center-right
.countdown-timer__position_bottom-left, .countdown-timer__position_bottom-center, .countdown-timer__position_bottom-right
.countdown-timer__unit_with-background
.countdown-timer__value_with-background

Example¶

Here is an example of countdown-timer element usage.

HTML

<countdown-timer class="countdown-timer countdown-timer_medium countdown-timer__position_center" style="--background-url: url('/path/to/image.jpg');" end-date="2030-01-30 12:00:00" tabindex="0" role="timer">
    <div class="countdown-timer__overlay" style="--overlayBackgroundColor: rgba(0,0,0,0.3);"></div>

    <div class="countdown-timer__active justify-items-start">
        <div class="countdown-timer__heading">
            <h2 class="header header_h2 countdown-timer__header">Limited Offer!</h2>
        </div>

        <div class="countdown-timer__countdown" style="--textColor: #ffffff; --timeUnitBackgroundColor: #000000; --borderRadius: 10%">
            <div class="countdown-timer__unit countdown-timer__unit_days countdown-timer__unit_with-background">
                <span class="countdown-timer__value">02</span>
                <span class="countdown-timer__label">days</span>
            </div>
            <span class="countdown-timer__separator">:</span>
            <div class="countdown-timer__unit countdown-timer__unit_hours countdown-timer__unit_with-background">
                <span class="countdown-timer__value">14</span>
                <span class="countdown-timer__label">hours</span>
            </div>
            <span class="countdown-timer__separator">:</span>
            <div class="countdown-timer__unit countdown-timer__unit_minutes countdown-timer__unit_with-background">
                <span class="countdown-timer__value">24</span>
                <span class="countdown-timer__label">minutes</span>
            </div>
            <span class="countdown-timer__separator">:</span>
            <div class="countdown-timer__unit countdown-timer__unit_seconds countdown-timer__unit_with-background">
                <span class="countdown-timer__value">51</span>
                <span class="countdown-timer__label">seconds</span>
            </div>
        </div>

        <div class="countdown-timer__description">
            Don't miss out on our seasonal clearance.
        </div>

        <a href="/promotions" class="btn btn_m btn_primary countdown-timer__button">Shop Now</a>
    </div>
</countdown-timer>

LESS¶

You can modify any Countdown timer less variable in your User Less section to change Countdown timer styles.

Countdown timer variables¶

Variables used to style Countdown timer.

@countDownTimerHeightSmall: 356px;
@countDownTimerHeightMedium: 400px;
@countDownTimerHeightLarge: 516px;
@countDownTimerContainerGap: @globalSpacing * 2;

@countDownTimerPaddingMobile: @globalSpacing;
@countDownTimerPadding: @globalSpacing * 2.5;

@countDownTimerContentMaxWidth: 720px;

@countDownTimerUnitMinWidthMobile: 45px;
@countDownTimerUnitMinWidth: 76px;
@countDownTimerUnitValuePaddingMobile: @globalSpacing * 0.75;
@countDownTimerUnitValuePadding: @globalSpacing * 1.25;

@countDownTimerUnitValueFontSizeMobile: @baseFontSize;
@countDownTimerUnitValueFontSize: @baseFontSize * 1.75;

@countDownTimerUnitLabelFontSizeMobile: @baseFontSize * 0.625;
@countDownTimerUnitLabelFontSize: @baseFontSize * 0.875;

@countDownTimerUnitGapMobile: @globalSpacing * 0.5;
@countDownTimerUnitGap: @globalSpacing * 1.5;

@countDownTimerUnitWithSeparatorGapMobile: @countDownTimerUnitGapMobile * 0.5;
@countDownTimerUnitWithSeparatorGap: @countDownTimerUnitGap * 0.5;

@countDownTimerSeparatorWidth: 0.375rem;
@countDownTimerDescriptionFontSize: @baseFontSize;

If you want to change Countdown timer styles, you can just change the variables. To change a padding for the countdown timer units, just modify @countDownTimerUnitValuePadding variable.

@countDownTimerUnitValuePadding: 1rem;

Countdown timer standard styles¶

Here are standard Countdown timer styles.

.countdown-timer {
    display: grid;
    position: relative;
    min-width: 100%;
    max-width: ~'calc(100vw - (@{gridGutterRem} * 2))';
    background-image: var(--background-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: @countDownTimerPaddingMobile;
    overflow: hidden;

    @media (min-width: @breakPointXs) {
        padding: @countDownTimerPadding;
    }

    &_small {
        min-height: @countDownTimerHeightSmall;
    }
    &_medium {
        min-height: @countDownTimerHeightMedium;
    }
    &_large {
        min-height: @countDownTimerHeightLarge;
    }

    &__position {
        &_top-left {
            justify-content: start;
            align-content: start;
        }
        &_top-center {
            justify-content: center;
            align-content: start;
        }
        &_top-right {
            justify-content: end;
            align-content: start;
        }
        &_center-left {
            justify-content: start;
            align-content: center;
        }
        &_center {
            justify-content: center;
            align-content: center;
        }
        &_center-right {
            justify-content: end;
            align-content: center;
        }
        &_bottom-left {
            justify-content: start;
            align-content: end;
        }
        &_bottom-center {
            justify-content: center;
            align-content: end;
        }
        &_bottom-right {
            justify-content: end;
            align-content: end;
        }
    }

    &__active,
    &__ended {
        display: grid;
        z-index: 1;
    }

    &__ended {
        .countdown-timer__button {
            margin-top: @countDownTimerContainerGap;
        }
    }

    &__header {
        word-break: break-word;
    }

    &__header,
    &__description,
    &__countdown {
        width: 100%;
        max-width: @countDownTimerContentMaxWidth;
    }

    &__header {
        color: inherit;
        margin: 0;
        width: fit-content;
        .weight-bold();
    }

    &__description {
        .font-size(@countDownTimerDescriptionFontSize);
        &_below {
            margin-bottom: @countDownTimerContainerGap;
        }
    }

    &__button {
        width: fit-content;
    }

    &__countdown {
        display: flex;
        align-items: flex-start;
        gap: @countDownTimerUnitGapMobile;
        margin-inline: inherit;
        margin-block: @countDownTimerContainerGap;
        width: fit-content;
        flex-wrap: wrap;

        &:has(.countdown-timer__separator) {
            gap: @countDownTimerUnitWithSeparatorGapMobile;
        }

        @media (min-width: @breakPointXs) {
            gap: @countDownTimerUnitGap;

            &:has(.countdown-timer__separator) {
                gap: @countDownTimerUnitWithSeparatorGap;
            }
        }
    }

    &__unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: @globalSpacing * 0.25;
        min-width: @countDownTimerUnitMinWidthMobile;
        @media (min-width: @breakPointXs) {
            min-width: @countDownTimerUnitMinWidth;
        }

        &_with-background {
            background-color: var(--timeUnitBackgroundColor);
            border-radius: ~'calc(var(--borderRadius) * 1%)';
            min-width: @countDownTimerUnitMinWidthMobile;
            padding: @countDownTimerUnitValuePaddingMobile;

            @media (min-width: @breakPointXs) {
                min-width: @countDownTimerUnitMinWidth;
                padding: @countDownTimerUnitValuePadding;
            }

            * {
                color: var(--textColor, inherit);
            }
        }
    }

    &__value {
        text-align: center;
        margin-inline: auto;
        word-break: break-word;
        .font-size(@countDownTimerUnitValueFontSizeMobile);
        @media (min-width: @breakPointXs) {
            .font-size(@countDownTimerUnitValueFontSize);
        }

        &_with-background {
            display: block;
            background-color: var(--timeUnitBackgroundColor);
            border-radius: ~'calc(var(--borderRadius) * 1%)';
            padding: @countDownTimerUnitValuePaddingMobile;
            color: var(--textColor, inherit);

            @media (min-width: @breakPointXs) {
                padding: @countDownTimerUnitValuePadding;
            }
        }
    }

    &__label {
        text-align: center;
        .font-size(@countDownTimerUnitLabelFontSizeMobile);
        @media (min-width: @breakPointXs) {
            .font-size(@countDownTimerUnitLabelFontSize);
        }
    }

    &__separator {
        text-align: center;
        width: @countDownTimerSeparatorWidth;
        padding-top: @countDownTimerUnitValuePaddingMobile;
        .font-size(@countDownTimerUnitValueFontSizeMobile);

        @media (min-width: @breakPointXs) {
            padding-top: @countDownTimerUnitValuePadding;
            .font-size(@countDownTimerUnitValueFontSize);
        }
    }

    &__overlay {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-color: var(--overlayBackgroundColor);
    }
}

Modules reference¶

countdown-timer