Countdown banner
The countdown banner component is for displaying a banner on a page that dynamically counts down to a specific date and time, most commonly used for upcoming OEP and AEP start and end dates. The countdown banner is localized to appear accurate for the user’s time zone.
When to use
- To display a countdown to an upcoming important date that is less than 99 days away
When not to use
- If date is over 99 days away
- For any general alert or messaging
Anatomy
Background color: option to have the background color be blue, white, off-white, bright blue 10% or gray 2
Content: the content is used to set up the event that the countdown banner is counting down to and is tagged as a heading with the flexibility of changing heading level but the styling stays the same
Date: date formatting has two options, either this smaller variation or a larger variation shown below. The formatting will dynamically switch from plural to singular when there’s less than 2 of any measurement left, such as “days” to “day” when there’s less than 2 days left but then go back to plural for when the measurement zeros out.
Demos & variations
Re-size demos to see tablet and mobile behavior.
Small countdown banner
Small countdown banner - date first
Flexibility in authoring to display the countdown date in the first part of the message.
Large countdown banner
Option in authoring to hide seconds display.
Recommendation: Display seconds during the final 15 seconds of the countdown. Displaying seconds before the final 15 seconds can create unnecessary urgency and pressure
Placement
Small countdown banner
The small countdown banner should be placed near the top of the page, recommended to put directly below the global header.
Large countdown banner
The large countdown banner is recommended to be placed within the body of the page.
