Cartzilla component

# Countdown

A versatile timer that counts down to any specific date, displaying time remaining in years, days, hours, minutes, and seconds.

The Countdown component relies on the Timezz plugin.

###### Data attribute API

Cartzilla adds extra layer of data attribute to access the date option of the plugin right from the HTML document:

`data-countdown-date='01/15/2025 12:00:00 UTC-08:00'` - UTC offset can be positive (+) or negative (-).

More on UTC offsets by countries read here.

#### Basic example

years
:
days
:
hours
:
mins
:
secs

    <!-- Basic countdown example -->
    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h4 mb-0" data-years></div>
        <span class="fs-sm">years</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-days></div>
        <span class="fs-sm">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-hours></div>
        <span class="fs-sm">hours</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-minutes></div>
        <span class="fs-sm">mins</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-seconds></div>
        <span class="fs-sm">secs</span>
      </div>
    </div>

#### Display no years

days
:
hours
:
mins
:
secs

    <!-- Countdown example without years label -->
    <div class="d-flex" data-countdown-date="10/15/2025 12:00:00">
      <div class="text-center">
        <div class="h4 mb-0" data-days></div>
        <span class="fs-sm">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-hours></div>
        <span class="fs-sm">hours</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-minutes></div>
        <span class="fs-sm">mins</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
      <div class="text-center">
        <div class="h4 mb-0" data-seconds></div>
        <span class="fs-sm">secs</span>
      </div>
    </div>

#### Sizing

years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs

    <!-- Sizing -->
    <!-- To adjust the size of the countdown, apply heading classes (.h1, .h2, .h3, ..., .display-1, .display-2, .display-3, ...) to the numbers and body size classes (.fs-xs, .fs-sm, .fs-lg, ...) to the labels. -->
    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h1 mb-0" data-days></div>
        <span class="fs-lg">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-3 mx-2">:</span>
    </div>

    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h2 mb-0" data-days></div>
        <span>days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-4 mx-2">:</span>
    </div>

    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h3 mb-0" data-days></div>
        <span class="fs-sm">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-4 mx-2">:</span>
    </div>

    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h4 mb-0" data-days></div>
        <span class="fs-sm">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
    </div>

    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h5 mb-0" data-days></div>
        <span class="fs-xs">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-lg mx-2">:</span>
    </div>

    <div class="d-flex mb-2" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center">
        <div class="h6 mb-0" data-days></div>
        <span class="fs-xs">days</span>
      </div>
      <span class="animate-blinking text-body-secondary mt-n1 mx-2">:</span>
    </div>

#### Colors

years
:
days
:
hours
:
mins
:
secs

    <!-- Supports a predefined color palette or can be configured to use any custom color. -->
    <div class="d-flex" data-countdown-date="10/15/2030 12:00:00">

      <!-- Primary -->
      <div class="text-center">
        <div class="h4 text-primary mb-0" data-years></div>
        <span class="fs-sm text-primary opacity-75">years</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>

      <!-- Success -->
      <div class="text-center">
        <div class="h4 text-success mb-0" data-days></div>
        <span class="fs-sm text-success opacity-75">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>

      <!-- Warning -->
      <div class="text-center">
        <div class="h4 text-warning mb-0" data-hours></div>
        <span class="fs-sm text-warning opacity-75">hours</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>

      <!-- Danger -->
      <div class="text-center">
        <div class="h4 text-danger mb-0" data-minutes></div>
        <span class="fs-sm text-danger opacity-75">mins</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>

      <!-- Info -->
      <div class="text-center">
        <div class="h4 text-info mb-0" data-seconds></div>
        <span class="fs-sm text-info opacity-75">secs</span>
      </div>
    </div>

#### Cards example

years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs

    <!-- Different card styles -->
    <!-- Border -->
    <div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center mb-2">
        <div class="border rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-years></div>
        </div>
        <span class="fs-sm">years</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="border rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-days></div>
        </div>
        <span class="fs-sm">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="border rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-hours></div>
        </div>
        <span class="fs-sm">hours</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="border rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-minutes></div>
        </div>
        <span class="fs-sm">mins</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="border rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-seconds></div>
        </div>
        <span class="fs-sm">secs</span>
      </div>
    </div>

    <!-- Body background + shadow -->
    <div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center mb-2">
        <div class="bg-body rounded shadow-sm p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-years></div>
        </div>
        <span class="fs-sm">years</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body rounded shadow-sm p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-days></div>
        </div>
        <span class="fs-sm">days</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body rounded shadow-sm p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-hours></div>
        </div>
        <span class="fs-sm">hours</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body rounded shadow-sm p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-minutes></div>
        </div>
        <span class="fs-sm">mins</span>
      </div>
      <span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body rounded shadow-sm p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-seconds></div>
        </div>
        <span class="fs-sm">secs</span>
      </div>
    </div>

    <!-- Secondary background -->
    <div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center mb-2">
        <div class="bg-body-secondary rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-years></div>
        </div>
        <span class="fs-sm">years</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body-secondary rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-days></div>
        </div>
        <span class="fs-sm">days</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body-secondary rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-hours></div>
        </div>
        <span class="fs-sm">hours</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body-secondary rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-minutes></div>
        </div>
        <span class="fs-sm">mins</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-body-secondary rounded p-2">
          <div class="h3 fw-medium mb-0 mx-1" data-seconds></div>
        </div>
        <span class="fs-sm">secs</span>
      </div>
    </div>

    <!-- Theme subtle backgrounds + color -->
    <div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
      <div class="text-center mb-2">
        <div class="bg-warning-subtle rounded p-2">
          <div class="text-warning h3 fw-medium mb-0 mx-1" data-years></div>
        </div>
        <span class="text-warning fs-sm">years</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-primary-subtle rounded p-2">
          <div class="text-primary h3 fw-medium mb-0 mx-1" data-days></div>
        </div>
        <span class="text-primary fs-sm">days</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-info-subtle rounded p-2">
          <div class="text-info h3 fw-medium mb-0 mx-1" data-hours></div>
        </div>
        <span class="text-info fs-sm">hours</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-danger-subtle rounded p-2">
          <div class="text-danger h3 fw-medium mb-0 mx-1" data-minutes></div>
        </div>
        <span class="text-danger fs-sm">mins</span>
      </div>
      <span class="blinking text-body-secondary fs-2 mx-2">:</span>
      <div class="text-center mb-2">
        <div class="bg-success-subtle rounded p-2">
          <div class="text-success h3 fw-medium mb-0 mx-1" data-seconds></div>
        </div>
        <span class="text-success fs-sm">secs</span>
      </div>
    </div>

Top