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 .countdownto any empty text or heading element (eg. span, p, h1 etc.) and specifying a date to countdown to with the data-dateattribute.
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-textto the .countdownelement.
<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-fallbackattribute.
<span class="countdown" data-date="03/13/2016" data-date-fallback="Timer Done"></span>