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

Reference

For Zeplin access contact the UX Design Manager

Figma

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