Inline 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.

Inline alerts will always be close to the content it is referring to. They should be used to deliver important applicable information or caution information to users for a specific content.

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

Functional grouping: Status and alerts

Demo

Configure: select the dropdowns below to display the variety of options that an inline alert supports.

Select inline alert type:

  • Caution
  • Important information

Display CTA:

  • Hide
  • Show

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Alert title:




    

  • should be concise and descriptive - avoid long sentences

  • recommended character limit is 50

  • include the alert type prior to the title i.e. “Caution | Your message here.”



Alert description:


    

  • message should contain further details

  • recommended character limit is 255



Call to action:


    

  • allows users to take further action on the notification

  • ensure the text is concise and direct



Alert icon:


    

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



Inline alerts can be full page width or constrained by grid columns. For site-wide/critical alerts, use global alert.



    






                
                    





    
    
    


Consider using inline alerts for:


    

  • important information regarding specific content or task(s) on the page

  • information users should read before proceeding but is not critical for them to read



Usage examples:


    

  • notice of service outage

  • instructions for applications




    






                
            

        

    
    
    




    
    
    







	

		Banner options
		
			
				

					Class name
				
					Colour
				
					Recommended icon
				
					Usage
				

			
		
		
		
			

				
				
					
					"caution"
				
				
				
				
			
				
				
					
					yellow
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-triangle
					

						
				
			
				
				
				
					
					
Urgent information and/or major disruptions to something specific to a service. Alert users to exercise care or attention regarding specific information. Example:
  • important health and safety information

						
				
				
			

		
			

				
				
					
					"information"
				
				
				
				
			
				
				
					
					blue
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-circle
					

						
				
			
				
				
				
					
					
Highlight crucial details that users need to know regarding to something specific on a page. Example:
  • location closure announcement

						
				
				
			

		
		
	

	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


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



    





Check weekly to see if it can be taken down. Update information accordingly.



    





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



    





Include the alert type prior to the title i.e. "Caution" or "Information".



    





Place alerts inline with the related content such as form fields.



    





Guide the user towards a next step with a call to action button if there are any to be taken.



    





Make sure the alert will always have a context, placing it in the wrong location can confuse users or make users ignore the message.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not use more than 1  call to action or links, which can distract or confuse users.



    





Do not use more than 3 inline alerts on a page. This can confuse users about which information is more important and can clutter the page.



    





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 display error messages. Example, do not use for an inline error validation on form inputs. Use an error message or error summary instead.



    





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



    





Do not use to display popular content, not to call for attention on a specific topic of the page.



    





Don't stack alert banners. If a new alert banner appears with a higher priority message, it should replace an existing alert banner of lesser importance until the higher priority one has been addressed.