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