Duration block

Duration block component shows the progress of an event or a project in time. It keeps the user on track and encourage the user to take certain actions by providing direct visual of count up and count down.

Demo

Configure: select the dropdowns below to display the variety of options that a duration block supports.


Code


				
			

Responsive preview

Usage best practices

Consider using duration block when:

  • precise deadlines or where expectations of exact duration is expected i.e. fireworks, time remaining to apply - use seconds in this scenario
  • representing long-term projects, plans, or impacts - use years in this scenario 
  • updating live time progress of an event - use only one duration block in this scenario
  • it's date-related content, not user session information i.e. no timeouts

Usage examples:

  • count down to New Year's Eve party
  • count down to tax due date
  • count up days for snow route cleaning

Do

Use an appropriate range of time units.

Support each duration block with clear labeling, context and progress.

When expressing duration as more than one unit of time, such as a combination of days, hours, and minutes, always show labels for each unit value.

Only hide the time unit when there is a single unit value.

Don't

Do not hide time units when showing duration as a combination of more than one time unit value i.e. hours and minutes.

Do not skip any units in the display. Show the full range of units in between the largest and smallest time units being displayed.

Do not wrap duration display. Make sure that all the units are always displayed side by side.

Do not use the duration block to convey user session-related information, such as timeouts, session log-in length.