Countdown Component
The Countdown component allows you to create a graphic timer that counts down to a date. Countdowns can help draw attention to an upcoming event or deadline. This component has multiple color styles and display layout that can be combined. Countdowns can include minutes, and seconds or only display days.
Component Fields
Date & Time
The date and time of the future event being counted down to.
Color / Style
The title of your video, used for accessibility purposes.
- WKU Red
- Light Gray
- White
Display
The layout and display method of the countdown. Row and Grid options include hours, minutes, and seconds in the countdown. The Day Only style works best in side columns or column snippets.
- Row
- Grid
- Day Only
Font Style
The style of the countdown text.
- Normal
- Italic Serif
Font Size
The size of the countdown text.
- Small
- Medium
- Large
- X-Large
Examples
Example 1
The following examples show the WKU Red style in the available display layouts, row, grid, and day.
Row
This example uses the row display, italic serif text style, and large font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: WKU Red
- Display: Row
- Font Style: Italic Serif
- Font Size: Large
Grid
This example uses the grid display, normal text style, and medium font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: WKU Red
- Display: Grid
- Font Style: Normal
- Font Size: Medium
Day
This example uses the day only display, italic serif text style, and x-large font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: WKU Red
- Display: Day Only
- Font Style: Italic Serif
- Font Size: X-Large
Example 2
The following examples show the Light Gray style in the available display layouts, row, grid, and day.
Row
This example uses the row display, normal text style, and large font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: Light Gray
- Display: Row
- Font Style: Normal
- Font Size: Large
Grid
This example uses the grid display, italic serif text style, and small font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: Light Gray
- Display: Grid
- Font Style: Italic Serif
- Font Size: Small
Day
This example uses the day only display, normal text style, and large font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: Light Gray
- Display: Day Only
- Font Style: Normal
- Font Size: Large
Example 3
The following examples show the White style in the available display layouts, row, grid, and day.
Row
This example uses the row display, normal text style, and x-large font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: White
- Display: Row
- Font Style: Normal
- Font Size: X-Large
Grid
This example uses the grid display, italic serif text style, and medium font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: White
- Display: Grid
- Font Style: Italic Serif
- Font Size: Medium
Day
This example uses the day only display, italic serif text style, and large font size.
- Date & Time: 03/14/2028 03:14 PM
- Color / Style: White
- Display: Day Only
- Font Style: Italic Serif
- Font Size: Large
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.