Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Countdown timer

A countdown is a timer showing the time remaining until an event or deadline, often used for promotions or events.

last modified: 01/01/1601 01:00:00

Overview

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:

Residential

Business

Enterprise

Anatomy

Remaining time
Time label

Best pratices

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.

last modified: 01/01/1601 01:00:00

Sizes and colors

last modified: 01/01/1601 01:00:00

Accessibility

Countdown div requires some attributes:

role="timer"
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"> .

How does it work

Countdown timer is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.countdownaccessible" attribute to work.

Countdown options

Countdown has properties you can put inside the <div> .

Attribute	Value	Explanation
data-countdown-neg		To have negative version of the component.
data-countdown-start	"May 8 2025 11:23:00 GMT+0200 (CET)"	Not mandatory. This is the start date and hours.
data-countdown-end	"May 8 2025 11:23:00 GMT+0200 (CET)"	This is the end date and hours.
data-countdown-intro	"#countdownIntro"	Not mandatory. It can be any parameter that the querySelectorAll function (javascript) can receive. This is to select the items to show before the countdown start.
data-countdown-hide	"#countdown"	Not mandatory. It can be any parameter that the querySelectorAll function (javascript) can receive. This is to select the items to hide when the countdown is finished.
data-countdown-reveal	"#countdownReveal"	Not mandatory. It can be any parameter that the querySelectorAll function (javascript) can receive. This is to select the items to show when the countdown is finished.
data-countdown-size	"rs-tit2"	Not mandatory. Class to set size of date/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.

Default countdown

Negative

Just add data-countdown-neg attribute to div .

Show content at the end

When the countdown is over, you can show new content and hide others (like the countdown itself).

Show content before coundown start

Content shown before the countdown start.

JavaScript

How to trigger the js

As Countdown timer is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

CONTEXT refers to document or html element parent.