Steps component

Steps componet shows the sequence of steps in a process, providing a clear view of progression from start to finish. It displays high-level sequential steps to create a clear hierarchy, helping users easily differentiate between stages in a process.

When to use it:

  • Use when you need to provide a quick glance of the process or status.
  • Use steps when there are more than 3 steps.
  • Maximum of 10 steps; group or categorize if more.

Usage examples:

  • Project status tracking: Display phases of various projects.
  • Service request processing: Show steps involved in processing service requests or applications.
  • Application procedures: Outline steps for different types of applications.
  • Event planning: Display stages in organizing events.
  • Process schedules: Show the sequence of steps for various processes and schedules.

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: Text and data

Demo

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    



    
    
        

           When NOT to use a step component
        

        








    
    
    


Use a timeline when steps need to be presented in a chronological order. It's ideal for visualizing events or processes that occur over time, such as project timelines or historical events. This component helps users clearly see the sequence and timing of each step.


Use an accordion for managing large amounts of content that can be categorized into sections, especially when the content does not need to be followed in a specific order. This is perfect for FAQs and detailed guides, where users can expand and collapse sections to focus on one piece of information at a time



    




    
    
    



    
    
        

           Accessibility considerations
        

        








    
    
    


    

  • Ensuring accessibility in your design is crucial for providing an inclusive user experience. Here are key considerations for steps components:

  • Keyboard navigation: Make sure all steps and interactive elements are accessible via keyboard. Users should be able to navigate through steps using the Tab key and activate links or buttons with the Enter or Space keys.

  • Screen readers: Use proper ARIA roles and labels to ensure that screen readers can accurately convey the information in each step. Clearly indicate the current step and any changes dynamically.

  • Colour contrast: Ensure sufficient colour contrast between text and background to make the content readable for users with visual impairments. Avoid relying solely on colour to convey important information.

  • Responsive design: Ensure that steps are easily readable and navigable on various devices and screen sizes, including when zoomed in.




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    
    




    
    


    

  • Use clear and concise titles and eyebrow headers.

  • Keep descriptions brief, under 100 characters per step.

  • Use point form and descriptive links where necessary.

  • Ensure 80 characters per line in vertical layouts for better readability.

  • Add a badge to indicate status in each step if necessary.




    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    
    




    
    


    

  • Do not exceed 10 steps; group or categorize if more.

  • Do not skip any step numbers.

  • Do not use all capital letters for headings.

  • Do not customize or change the styles (including colours, shapes, and font sizes) in the counter circle and connectors.

  • Do not use excessive links; keep them minimal and relevant, use up to 2 descriptive links.

  • Do not use vague link text such as "Learn more" or "Find out more." Ensure link text is descriptive and specific about the content or action, such as "Read about project details" or "View application guidelines."

  • Do not nest steps within other steps.

  • Do not add unnecessary visual elements such as images, videos, illustrations, or icons that do not contribute to the understanding of the steps.

  • Do not use expand/collapse in horizontal layouts.

  • Do not use expand/collapse functionality when there is only a title with no additional content in vertical layout. 

  • Do not use more than one badge per step to avoid clutter and confusion.

  • Do not have more than one current state within one step. It's acceptable to have multiple completed or not started/upcoming states.