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 →
Countdown
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>