Countdown timer

The countdown timer component helps visitors visualize the counting toward or away from a fixed point in time.

Time intervals displayed by the countdown timer can include:

  • Weeks
  • Days
  • Hours
  • Minutes
  • Seconds

Sample

Default

wks
days
hrs
mins
secs

Primary

wks
days
hrs
mins
secs

Default


      

       

        wks

        
       

       

        days

        
       

       

        hrs 

        
       

       

        mins

        
       

       

        secs

Primary


      

       

        wks

        
       

       

        days

        
       

       

        hrs

        
       

       

        mins

        
       

       

        secs

Usage

When and how to use it

Use the countdown timer to emphasize important events. These events might include:

  • Release dates
  • Application openings and/or deadlines
  • The launch of new products or services

How not to use it

Try not to use months in your countdown as they present a fluctuating metric of time.

Avoid excessive timeframes (more than 1 year) as this renders the countdown useless to visitors.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes