Headings

Headings provide users (visual and those using assistive technologies) with critical information about the content hierarchy on a webpage or web application. 

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 headings support.

Subtitle block heading

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


HTML provides us with six levels of headings represented by <h1> through to <h6>.  Each heading level has corresponding styles such as responsive font-sizes, margins and line heights. Typically, the headings are not constrained by line length unless they are inside the <article> tag where they take on the line length of a paragraph <p> tag.


Consider using headings to:


    

  • provide structure and hierarchy to the blocks of content

  • group subtopics under a larger grouping

  • break up different topics on a single page




    






                
                    





    
    
    


Usage example:


    

  • heading for a recreation facility followed by next level heading for hours of operation, amenities, etc.
    





    






                
            

        

    
    
    




    
    
    







	

		Heading variations and features
		
			
				

					Variation name
				
					Variation availability
				
					Unique features
				

			
		
		
		
			

				Standard
				
				
				
				
			
				
				
				
					
					
all levels <h1> to <h6>

						
				
				
			
				
				
				
					
					
  • different responsive font sizes
  • responsive line heights
  • margins

						
				
				
			

		
			

				Subtitle block
				
				
				
				
			
				
				
				
					
					
second level heading only <h2>

						
				
				
			
				
				
				
					
					
  • heavier font lines
  • line below the text - two options:
    • black line
      • line length runs the full width of the container
    • red line:
      • two line length options (short, long)
      • two alignment options (left, right)

						
				
				
			

		
		
	

	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


For the subtitle with red underline variation, choose a line length that matches closely with the amount of text in the title.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not skip any heading levels i.e. go from heading 2 straight to heading 4. This creates accessibility issues for users using assistive technologies such as screen readers to peruse the content.



    





Do not use heading 1 more than once on a page as this creates confusion for users using assistive technologies such as screen readers to peruse the content.