Countdown

To use the countdown, add this snippet below into an HTML component.

Setting Time

The span element will contain the time you want the countdown to reach. This should be formatted in UTC time as shown below.

The actual countdown clock resides in a template, hence the `{% include 'countdown/_countdown-clock.html' %}` declaration.

Displaying content before and after the countdown completes.

`countdown-content__link--finished` and/or `countdown__message--finished` will display when the countdown reaches 0. `countdown__message` and `countdown-content__link--in-progress`

<div class="countdown">
  <span class="countdown-start-time" data-time="2016-04-30 18:15:00"></span>
  {% include 'countdown/_countdown-clock.html' %}
  <div class="countdown-content">
    <h3 class="countdown__message--finished">The Rival 300 is here</h3>
    <a class="countdown-content__link countdown-content__link--finished" href="#">Go And Get It &raquo;</a>
    <h3 class="countdown__message">Until The Rival 300</h3>
    <a class="countdown-content__link countdown-content__link--in-progress" href="#">Learn More &raquo;</a>
  </div>
</div>

The Rival 700 is here

Go And Get It »

Until The Rival 700

Learn More »