Global alert

Global alerts will be the first thing user will see on the page, above everything else, and it is site-wide. They should be used to deliver urgent, critical, or universally applicable information to users in a highly visible and immediate manner, ensuring that they are promptly informed and able to respond accordingly.

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

Global alert banners site-wide require supervisor or leader approval.

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

Select global alert type:

  • Warnings
  • Warning lifted
  • Caution
  • Important information

Display CTA:

  • Hide
  • One CTA
  • Two CTA

Success test label | Global alert title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab quasi architecto beatae vitae dicta sunt explicabo.

Call to Action

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. “Warning | 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
    • 



Global alert banners span the full page width, are placed at the top of a page and users can dismiss or minimize them. For page-specific alerts, use inline alert.



    






                
                    





    
    
    


Consider using global alerts for:


    

  • temporary system, program or service disruptions or announcements
    • 

  • important information for users regardless of the page content within your site
    • 



Usage examples:


    

  • emergency alerts
    • 



Title override


    

  • text option available for special cases only (when Emergency, Caution & Information do not suffice)
    

    • 

  • must have a web supervisor sign-off on chosen title change
    • 




    






                
            

        

    
    
    




    
    
    







	

		Banner options
		
			
				

					Class name
				
					Colour
				
					Recommended icon
				
					Usage
				

			
		
		
		
			

				
				
					
					"warning" or "error"
				
				
				
				
			
				
				
					
					red
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-triangle
					

						
				
			
				
				
				
					
					
Warnings / crisis: State of Local Emergency (SOLE), Municipal Emergency Plan (MEP), or EOC activation with considerable risk to human life or property. Use to alert users of extreme situations. Example:
  • Tornado warning, Flood warning, Hazardous material spill

						
				
				
			

		
			

				
				
					
					"caution"
				
				
				
				
			
				
				
					
					yellow
				
				
				
				
			
				
				
				
				
					

						
						 cicon-exclamation-triangle
					

						
				
			
				
				
				
					
					
Urgent events and/or major disruptions to City services. Alert users to exercise care or attention regarding specific information. Example: 
  • Fire bans, parking bans, water boil advisories, amber alerts 

						
				
				
			

		
			

				
				
					
					"success"
				
				
				
				
			
				
				
					
					green
				
				
				
				
			
				
				
				
				
					

						
						 cicon-check-circle
					

						
				
			
				
				
				
					
					
Warning lifted: Signal that a previously issued warning is no longer in effect. Must have a resolved date indicating when the issue was solved / stopped. Example:
  • state of emergency has been lifted

						
				
				
			

		
			

				
				
					
					"information"
				
				
				
				
			
				
				
					
					blue
				
				
				
				
			
				
				
				
				
					

						
						 cicon-info-circle
					

						
				
			
				
				
				
					
					
Important information: Minor disruption to a City service, more related to technology or service change. Example:
  • Calgary.ca or other application down for maintenance. 

						
				
				
			

		
		
	

	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Get approval from a supervisor or leader before putting up a Global alert banner!



    





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



    





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.



    





Include the alert type prior to the title i.e. "Warning" or "Crisis", "Caution" or "Success".



    





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



    





Including dates can indicate when an alert has been issued, updated, or resolved, so users are assured they are getting the latest information.



    





Use the full page width and place the alert at the top of the page. This shows users that the content is higher in the information hierarchy.



    





A link to further information is recommended, with the first preference for links to regular myCity pages. 



    





News articles should only be linked to when there is no available myCity page.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not use more than 2 calls to actions or links, which can distract or confuse users.



    





Do not use more than one global alert. This can confuse users about which information is more important.



    





Do not keep global alerts on for longer than the period the alert is referring to, so make sure to monitor them closely and take them down or modify them as soon as possible. Users who don't notice changes will learn to disregard banners over time.



    





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, for In-line error validation on form inputs, use an error message or error summary instead.