Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Countdown Component

    The Countdown component shows how much time is left before a deadline or event. Once added to the page, it automatically updates as time passes.

    Overview

    Component name: Countdown

    Authors who can use component: any

    Templates/page types that can use component: all

    Required or optional: optional

    Countdown component. Title reads "Real ID enforcement date is May, 2025." Description reads "Upgrade your driver's license/photo ID card today." Timing numbers read "203 Days, 23 Hours, 58 Minutes."

    Authoring Fields

    Adding the Countdown component to the page

    1. Once on the desired page in Edit mode, add the Countdown by doing the following:

    a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Countdown” in the search bar, or scroll to the Countdown in the list. Double click to add to page.

    b. Option 2- on the left hand rail, navigate to the Components tab. Type “Countdown” in the search bar, or scroll to the Countdown in the list. Double click to add to page.

    Editing the Countdown component

    1. With the edit wrench, open the component.
    2. Title field: Add a title to appear above the Countdown.
    3. Description field: Add a short description to appear above the Countdown.
    4. Date/Time picker: Select a date/hour/minute for the Countdown.
    5. Alignment dropdown: Select Center or Left to align the Countdown within its container.  Default Center.

     

    Accessibility

    There are no specific accessibility notes for the Countdown component.

    Other Tips

    1. The Countdown displays how many days, minutes, and hours remain before the deadline.
    2. Once the Countdown's date passes, the component will disappear off the page- authors do not need to remove it. Content below will shift upward.
    3. Multiple Countdowns may be added to a page.