List

Large amounts of text on a page can be visually overwhelming for users. If they cannot quickly scan sections to find key points, they may leave the page. Lists visually separate items or ideas in vertical indexes of text or images. This makes it easier for users to scan, see and compare key points on a page.

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 | coc-card-item.js

Functional grouping: Text and data

Demo

Configure: select the dropdowns below to display the variety of options that lists support.

  • This is list item 1
  • This is list item 2
  • This is list item 3
    • This is nested item 1
    • This is nested item 2
    • This is nested item 3
  • This is list item 4
  • This is list item 5
  • This is list item 6, which is very long. Etiam dapibus, mi consectetur cursus porttitor, nisl ipsum porta ante, nec volutpat tellus erat at eros. Mauris pretium ultrices ante vitae iaculis.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Consider using lists to:


    

  • display related items in logical ways 

  • present text and actions in a concise format

  • reduce the reading grade level of your content




    






                
                    





    
    
    


Usage examples:


    

  • list of locations

  • process steps

  • features or benefits of a product




    






                
            

        

    
    
    




    
    
    







	

		List variations, features and usage
		
			
				

					Variation
				
					Unique features
				
					Usage
				

			
		
		
		
			

				Bulleted list (unordered)
				
				
				
				
			
				
				
				
					
					
Contains:
  • dot row indicator

						
				
				
			
				
				
				
					
					
When sequential order doesn't matter i.e. list of recreation facilities

						
				
				
			

		
			

				Numbered list (ordered)
				
				
				
				
			
				
				
				
					
					
Contians:
  • sequential increases in alpha/numeric row indicator

						
				
				
			
				
				
				
					
					
When sequential order matters i.e. steps in booking a greenspace

						
				
				
			

		
			

				Description list
				
				
				
				
			
				
				
				
					
					
Contains:
  • bolded term
  • description

						
				
				
			
				
				
				
					
					
When terms need to be grouped with their definitions i.e. glossary

						
				
				
			

		
		
	

	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Maintain sufficient space between list items. This distinguishes each row from the other.



    





Use the same tense or type of verb to start list items.



    





Choose the appropriate list for its purpose.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not create lists and list items that are too long (more than 8 items). This makes the list difficult to scan.



    





Do not nest more than two list levels inside a list. This can make it difficult for users to understand the list items.



    





Do not put entire paragraphs in each bullet or numbered item. This makes the list difficult to scan.



    





Do not use the ordered list (with numbers) unless the sequential order is required.