Please don't forget to read Usage part of each element.
Countdown timer displays the time remaining and count down to a specific moment.
A countdown timer is a great addition to an interface, particularly if the objective is to drive urgency, encourage engagement and drive conversions. The countdown timer displays the time remaining of a offer every time the user opens the page.
Font differentiation by Business Unit
A font differentiatity is applied by Business Unit:
Add a call to action
As the timer is there to encourage engagement and conversion so position a super clear call to action close by.
Add a clear message
Remember to include messaging around the timer. Messaging is key to promoting action. Include text to clearly state what the timer is counting down to.
Drive urgency with care
Don’t use a countdown timer in every web interface to avoid sounding gimicky. That sense of urgency will quickly become ignorable.
Sizes and colors
Countdown div requires some attributes:
aria-atomic="true": assistive technologies will present the entire contents of the element instead of only updated parts
aria-roledescription="Screen reader copy to introduce the countdown": copy must be briefed
Hidden content to reveal at the end of the countdown must be surrounded by <div aria-live="polite"> .
Countdown timer is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.countdownaccessible" attribute to work.
Countdown has properties you can put inside the <div> .
|data-countdown-neg||To have negative version of the component.|
|data-countdown-end||"May 8 2025 11:23:00 GMT+0200 (CET)"||This is the end date and hours.|
Don't forget to put linked ID or whatever you need (class ?) on content that needs to be hidden or revealed at the end of the countdown.
As Countdown timer is a webcomponent, you will have to load
CONTEXT refers to document or html element parent.