Skip to main content

Countdown Component


Embedded content is inherently not very responsive, and in turn may not display as expected on mobile devices, or devices with smaller screen sizes. One of the most popular embeds is a YouTube video on a page. To overcome the responsive problem this component allows you to create a cleaner and responsive youtube embed from only the YouTube video URL and a Title. This component ensures that the video embedded will not slow your page loading. It can be placed anywhere on a page, including side columns, and will respond to the width.

 

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 8/18/20