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/2022 03:14 PM
Color / Style: WKU Red
Display: Row
Font Style: Italic Serif
Font Size: Large

Date & Time: 03/14/2022 03:14 PM
Color / Style: WKU Red
Display: Grid
Font Style: Normal
Font Size: Medium

Date & Time: 03/14/2022 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/2022 03:14 PM
Color / Style: Light Gray
Display: Row
Font Style: Normal
Font Size: Large

Date & Time: 03/14/2022 03:14 PM
Color / Style: Light Gray
Display: Grid
Font Style: Italic Serif
Font Size: Small

Date & Time: 03/14/2022 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/2022 03:14 PM
Color / Style: White
Display: Row
Font Style: Normal
Font Size: X-Large

Date & Time: 03/14/2022 03:14 PM
Color / Style: White
Display: Grid
Font Style: Italic Serif
Font Size: Medium

Date & Time: 03/14/2022 03:14 PM
Color / Style: White
Display: Day Only
Font Style: Italic Serif
Font Size: Large