HP.com Design System HP.com Design System HP.com Design System

Countdown timer

Visual reference of the amount of time until a sale/promotion expires to help expedite purchasing decisions

Usage

This module allows users to always have reference of time left to make a special purchase even while scrolling down a page

Module specifications

Background and text colors are configurable
Promotion title is optional
Option to make sticky
Option to hide counter when it reaches 0
If using inside a background container, ensure that background width is set to have no limit

Character counts (with spaces)

Promotion title - 30 max characters
Counter labels - 8 max characters

Example layouts

Any colors from color palette can be used. Ensure color use is ADA complaint.

Desktop with promotion title

Mobile with promotion title

Resources

For Zeplin access contact the UX Design Manager

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.