Small alert

Users browse pages, scanning quickly for useful or interesting information. If important information is buried within the page content, users can easily miss it.

Small alerts can be on different locations of the page. They should be used to deliver applicable information to users in a highly visible and immediate manner, ensuring that they are promptly informed and able to respond accordingly.

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: Status and alerts

Demo

Configure: select the dropdowns below to display the variety of options that a small alert supports.

Select small alert type:

  • Warnings
  • Warning lifted
  • Caution
  • Important information
Caution label

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    


Alert label:


    

  • should be concise and descriptive
    • 



Alert icon:


    

  • serves as a visual cue to correlate with an alert type
    • 




    






                
                    







                
            

        

    
    
    




    
    
    







	

		Banner options
		
			
				

					Class name
				
					Colour
				
					Recommended icon
				
					Usage
				

			
		
		
		
			

				
				
					
					"warning" or "error"
				
				
				
				
			
				
				
					
					red
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-triangle
					

						
				
			
				
				
				
					
					
Display system errors messages that users must read before continuing to use an application. Example:
  • form is missing information and could not be submitted
  • network error occurred

						
				
				
			

		
			

				
				
					
					"caution"
				
				
				
				
			
				
				
					
					yellow
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-triangle
					

						
				
			
				
				
				
					
					
Alert users to exercise care or attention regarding specific information.  

						
				
				
			

		
			

				
				
					
					"information"
				
				
				
				
			
				
				
					
					blue
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-circle
					

						
				
			
				
				
				
					
					
Highlight crucial details that users need to know or that will help them performing a task.  

						
				
				
			

		
			

				
				
					
					"success"
				
				
				
				
			
				
				
					
					green
				
				
				
				
			
				
				
				
				
					

						
						 cicon-check-circle
					

						
				
			
				
				
				
					
					
Indicates an action that has been completed successfully. Example:
  • form has been submitted successfully
  • setting has been saved

						
				
				
			

		
		
	

	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Make sure to choose the right alert type, using the wrong type can confuse users



    





Keep the title and description clear and concise so users understand why the information is important and the action(s) to take.



    





Place small alerts inline with the related content, so users know what it refers to.



    





Error messages must guide the user on how to recover from an error.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not write messages that are ambiguous or unhelpful for users. An alert that says 'System is down' without providing specifics or guidance is ineffective.



    





Do not use to Highlighting content, quotes, examples, snippets of information. Use a callout instead.