Skip to main content

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.

Days,
Hours,
Minutes,
Seconds
Loading...

  • Date & Time: 03/14/2022 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.

Days,
Hours,
Minutes,
Seconds
Loading...

  • Date & Time: 03/14/2022 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.

Days
Loading...

  • 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.

Days,
Hours,
Minutes,
Seconds
Loading...

  • Date & Time: 03/14/2022 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.

Days,
Hours,
Minutes,
Seconds
Loading...

  • Date & Time: 03/14/2022 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.

Days
Loading...

  • 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.

Days,
Hours,
Minutes,
Seconds
Loading...

  • Date & Time: 03/14/2022 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.

Days,
Hours,
Minutes,
Seconds
Loading...

  • Date & Time: 03/14/2022 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.

Days
Loading...

  • Date & Time: 03/14/2022 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.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20