Countdown Timer

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Stack's modular elements  
at the Element Index Page →


Stack features simple to use countdown timers perfect for timed sales, coming soon pages, product launches etc. The countdown timer works by adding the class .countdown to any empty text or heading element (eg. span, p, h1 etc.) and specifying a date to countdown to with the data-date attribute.

NOTE: The date can be in MM/DD/YYYY format.

<span class="countdown" data-date="03/13/2017"></span>

Days Text

You can easily customize the "days" text to say something else. This is especially useful for sites in languages other than English. Simply add the data attribute data-days-text to the .countdown element.

<span class="countdown" data-date="03/13/2017 data-days-text="dias" ></span>

Countdown Fallback

Once the timer reaches zero, you can specify some fallback text using the data-date-fallback attribute.

<span class="countdown" data-date="03/13/2016" data-date-fallback="Timer Done"></span>