Count up card

The Count-Up timer card  for milestones

The Count-Up Timer displays key statistics for a specific event or important milestone of a project. Its gentle animation effectively draws attention to ongoing progress, capturing users' attention subtly and making the information more engaging and memorable.

What this component should be used for?

The Count-Up Timer is ideal for showcasing essential statistics and progress metrics. It helps highlight meaningful data points in various contexts, such as:

  • Displaying how many rides were taken in a year on public transportation.
  • Showing how many people used public transit in a given period.
  • Indicating the duration from conception to implementation of a major infrastructure project.
  • Presenting customer engagement statistics.

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

Functional grouping: Marketing and storytelling

Demo

Neque porro quisquam 200

Neque porro quisquam est qui dolorem ipsum quia

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    
    




    
    


    

  • Highlight Relevant Data: use the timer to showcase statistics that are meaningful and relevant to users.

  • Ensure Readability: follow design system guidelines for font sizes and colors to maintain good contrast and visibility.

  • Maintain Visual Consistency: Ensure the timer’s design matches the overall aesthetic of the website.

  • Update Regularly: Keep the displayed information up-to-date and accurate. The frequency of updates should depend on how often the information changes significantly.

  • Ensure Responsiveness: Make sure the timer functions well across all devices, including desktops, tablets, and smartphones. 




    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    
    




    
    


    

  • Avoid Overuse: Don’t overload your interface with more than 3 timers per page, which can overwhelm users.

  • Don’t have a cluttered Display: Don’t include unnecessary details that can clutter the display and confuse users.

  • Don’t have inconsistent Formatting: Avoid using different time formats within the same timer, which can lead to confusion.

  • Don’t ignore Accessibility: Don’t overlook accessibility features and ensure all users can interact with and understand the timer.