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.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | moment.min.js | COC.Components.DurationBlock.Timer.js

Functional grouping: Text and data

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.