Contact information block

When there is a lot of content on a page, it can take more time for users to sift through it. The contact information block provides a consistent layout and format for contact-type information (address, phone number, features, etc.). Users are able to quickly find, filter or compare location or other data.

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 a contact information block supports.

Southland Leisure Center

Pool and fitness facility

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Address: 2000 Southland Drive SW

Phone number: 403-555-1234

Email address: southland.leisure.centre@calgary.ca

Hours of operation:

  • Monday - Friday: 7 a.m. - 9 p.m.
  • Saturday: 7 a.m. - 8 p.m.
  • Sunday: 7 a.m. - 6 p.m.
  • Facility closed:
    • Sep. 6 (Labour Day),
    • Dec. 25th (Christmas Day)
    • Dec. 26th (Boxing Day)

Facility features:

  • Wave pool
  • Dive tank
  • Hot tub
  • Steam room
  • Water slides
  • AquaPlay structure
  • Kiddie pool
  • Weights & cardio
  • Fitness studio
  • Gymnasium
  • Squash & racquetball courts
  • Arenas

Primary call to action Secondary call to action

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Contact information block can be used as a stand-alone within a page to highlight the information or as a group to show all blocks or compare data.


Consider using contact information block to:


    

  • display contact-type information (i.e. address, phone number, location features, etc.)

  • help users see and compare a variety of related information or options (i.e. hours, prices, etc.)




    






                
                    





    
    
    


Usage examples:




    

  • facility location

  • rental and booking location

  • service or organization contact information




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Use only one call to action link or button per item; ensure that the call to action text is specific (i.e. "Contact Joe" vs. "Contact us").



    





Place contact information blocks at or near the top of the page, specifically on contact pages.



    





Use icons consistently across all items, if an icon is used for any item in a column, an icon must also be used for all items in the block.



    





Use the same layout and display options when using a series of contact information blocks on a page (i.e. same section order, appearance of icons and images, etc.).



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not replace labels with icons. Icons must only supplement text (i.e. list the Twitter handle next to the Twitter icon).



    





Do not include too much information. Information should be short and scannable - avoid full sentences.



    





Do not use an image that is unrelated to the person, place, or organization to be contacted.



    





Do not overwhelm users with too many contact information blocks to scroll through. Enable pagination or filtering so they can narrow their options and reduce visual congestion.