Countdown Snippet

The Countdown snippet allows you to create a graphic timer that counts down to a defined date. This snippet allows you to set font size, font style, and has multiple style as well as display options you can combine. Use this snippet to draw attention to an upcoming event or deadline.

Snippet Options

STYLE

Changes the overall style or color of the countdown timer.

• STYLE-1 - WKU Red
• STYLE-2 - Gray
• STYLE-1 - White

DISPLAY

Controls the display mode of the timer.

• ROW - 1x4 layout with hours, minutes, and seconds.
• GRID - 2x2 layout with hours, minutes, and seconds.
• DAY - 1x1 layout with days only.

FONT-STYLE

Changes the style of the numbers between normal and a serif font from in the hero area.

• NORMAL
• SERIF

FONT-SIZE

Controls the size of the countdown numbers. Remember to adjust your font size to suit the location and display of your countdown timer.

• SM
• MD
• LG
• XL

Snippet Columns

Event Title

An optional title included above the countdown timer. You may also leave this blank and insert a title on your page in any style.

Event Date

Enter the date of your event to countdown to. The format must match MM/DD/YYYY HH:MM AM with leading zeros or the snippet will not countdown correctly. (Ex - 03/04/2018 01:08 PM). You can also use the Datetime Picker below to generate the correctly formatted date, then paste into your snippet.

Examples

Countdown snippets are being replaced with the Countdown Component. View the component example page for examples of styles and replace any snippet in the process.

Countdown Component