Icon subject layout

The icon subject layout pattern allows room for longer form content and to display a series of related content.

The supplementary icon on the left side makes the text more scannable and interesting to the eyes as well as can help with accessibility when language is a barrier for certain users.

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: Containers

Demo

Configure: select the dropdowns below to display the variety of options that an icon subject layout supports.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Call to action

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Choose the icon subject layout in instances where icon offers supplementary information to the remaining content. It incorporates:


    

  • an icon

  • a title

  • body text

  • background colour (preset with neutral colours) 



The icon is positioned on the left side of the content and can be aligned with the title or centered on the body. The icon offers two sizes:




    

  • font icon (up to 32px)

  • an SVG illustration (up to 128px)



Consider the relative size of an icon compared to other visual elements presented on the screen. Generally on desktops and larger tablets the icon will look less salient than on a mobile screen.



    






                
                    







                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Use recognizable and relevant icons.