Proximus design system
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: 30/09/2021 11:10:06

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

  1. Remaining time
  2. 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: 30/09/2021 11:10:06

Sizes and colors

last modified: 13/06/2023 16:40:05

Default countdown

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-end "May 8 2025 11:23:00 GMT+0200 (CET)" This is the end date and hours.
data-countdown-hide "#countdown" 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" 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.

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.

Countdown end

Negative countdown

Countdown end

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.