Count up card set

The Count Up Card set allows to display multiple count up cards in a single organized collection.

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

Eyebow text (optional)

Section title

  • Eyebrow header (Optional)

    Lorem Ipsum 120

    15

    Quia dolor sit amet, consectetur

  • Eyebrow header (Optional)

    Neque porro quisquam 200

    10

    Quia dolor sit amet, consectetur

  • Eyebrow header (Optional)

    Est qui dolorem ipsum 250

    5

    Quia dolor sit amet, consectetur

  • Eyebrow header (Optional)

    Dolorem ipsum 100

    5

    Quia dolor sit amet, consectetur

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.