Countdown
Creates a component that counts down to a given date from now.
Usage
To apply the Countdown component, add the f-countdown
class and the data-f-countdown
attribute to a ul
element. You will also need to pass the date you wish to countdown towards to this attribute.
Inside of your containing ul
create four list items and two span
elements inside those. See the markup example for classes that should be placed onto the span
elements.
NOTE If you would like your countdown to include years and weeks, add six list items to your containing ul
The span
elements will contain the default values for your countdown units (00), as well as the labels for the units. They also have some basic styling hooks applied to them.
Example
- 00 days
- 00 hours
- 00 minutes
- 00 seconds
Markup
<ul class="f-countdown" data-f-countdown="{ countdownDate : '25 December 2019 10:00:00' }">
<li>
<span class="f-countdown-number days">00</span>
<span class="f-time f-time-days">days</span>
</li>
<li>
<span class="f-countdown-number hours">00<span>
<span class="f-time f-time-hours">hours</span>
</li>
<li>
<span class="f-countdown-number minutes">00</span>
<span class="f-time f-time-minutes">minutes</span>
</li>
<li>
<span class="f-countdown-number seconds">00</span>
<span class="f-time f-time-seconds">seconds</span>
</li>
</ul>
With Years and Weeks
Example
- 2 Years
- 2 weeks
- 00 days
- 00 hours
- 00 minutes
- 00 seconds
Markup
<ul class="f-countdown" data-f-countdown="{ countdownDate : '25 December 2019 10:00:00' }">
<li>
<span class="f-countdown-number years">00</span>
<span class="f-time f-time-years">years</span>
</li>
<li>
<span class="f-countdown-number weeks">00<span>
<span class="f-time f-time-weeks">weeks</span>
</li>
<li>
<span class="f-countdown-number days">00</span>
<span class="f-time f-time-days">days</span>
</li>
<li>
<span class="f-countdown-number hours">00<span>
<span class="f-time f-time-hours">hours</span>
</li>
<li>
<span class="f-countdown-number minutes">00</span>
<span class="f-time f-time-minutes">minutes</span>
</li>
<li>
<span class="f-countdown-number seconds">00</span>
<span class="f-time f-time-seconds">seconds</span>
</li>
</ul>
Leading Zeros
If you wish, you may turn off the leading zeros on your countdown, so when a certian unit goes below 10 it would read 9
rather than 09
Example
- 00 days
- 00 hours
- 00 minutes
- 00 seconds
Markup
<ul class="f-countdown" data-f-countdown="{ countdownDate : '25 December 2019 10:00:00', countdownZeros: false' }">
Layouts
Stacked
By default the countdown will try and display its units inline at smaller resolutions. However to have the countdown stack on smaller resolutions, add the class f-countdown-stacked
to your containing ul
Example
- 00 days
- 00 hours
- 00 minutes
- 00 seconds
Markup
<ul class="f-countdown f-countdown-stacked" data-f-countdown="{ countdownDate : '25 December 2019 10:00:00' }">
Dividers
Unit dividers can also be added to the countdown, but adding the class f-countdown-divider
to your contining ul
.
NOTE This can also be used with the f-countdown-stacked
modifier.
Example
- 00 days
- 00 hours
- 00 minutes
- 00 seconds
Markup
<ul class="f-countdown f-countdown-divider" data-f-countdown="{ countdownDate : '25 December 2019 10:00:00' }">
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
countdownDate |
string | null | date to count down to, as a string |
countdownFormat |
string | on | |
countdownZeros |
boolean | true | adds leading zeros e.g 01 days |
callback |
function | empty function |