Countdown | Crossroads Digital Design Kit

UI Components / Countdown

To get the countdown to count down in real time requires JavaScript. The implementation of such JS will be based on the context in which you are using a countdown timer.

Countdown Timer

The default countdown pattern stacks each element in the timer.

  • 03
  • 00
  • 42
  • 37
<ul class="countdown-timer">
  <li class="countdown-days">03</li>
  <li class="countdown-hours">00</li>
  <li class="countdown-minutes">42</li>
  <li class="countdown-seconds">37</li>
</ul>

Countdown Bar

Countdown bars get wrapped in a generic .countdown selector.This adds support for a .countdown-header selector, which can act as a label for your timer.

The thing starts in...
  • 03
  • 00
  • 42
  • 37
<section class="container-fluid">
  <div class="countdown">
    <span class="countdown-header">The thing starts in...</span>
    <ul class="countdown-timer list-inline">
      <li class="countdown-days">03</li>
      <li class="countdown-hours">00</li>
      <li class="countdown-minutes">42</li>
      <li class="countdown-seconds">37</li>
    </ul>
  </div>
</section>

Color Variations

You have the option to adjust the background color of the countdown bar, which will adjust the countdown elements' colors. Currently, only .countdown-bg-cyan is supported.

You can also change the text color alone. Currently only .countdown-white is supported.

The thing starts in...
  • 03
  • 00
  • 42
  • 37
<section class="container-fluid">
  <div class="countdown countdown-bg-cyan">
    <span class="countdown-header">The thing starts in...</span>
    <ul class="countdown-timer list-inline">
      <li class="countdown-days">03</li>
      <li class="countdown-hours">00</li>
      <li class="countdown-minutes">42</li>
      <li class="countdown-seconds">37</li>
    </ul>
  </div>
</section>

Floating Timer

By wrapping the countdown timer in a .countdown-border selector, the countdown will be centered and bordered, so it can float on its own outside the context of a color bar.

  • 03
  • 00
  • 42
  • 37
<div class="countdown countdown-border">
  <ul class="countdown-timer">
    <li class="countdown-days">03</li>
    <li class="countdown-hours">00</li>
    <li class="countdown-minutes">42</li>
    <li class="countdown-seconds">37</li>
  </ul>
</div>

Buttons

On the cyan countdown bar, buttons with the .countdown-btn will have a lightened background.

Thing is happeneing now! Watch Now
<section class="container-fluid">
  <div class="countdown countdown-bg-cyan">
    <span class="countdown-header push-right">Thing is happeneing now!</span>
    <a class="btn countdown-btn" href="/live/stream">Watch Now</a>
  </div>
</section>