Global inline alert

Global Inline alerts will always be up top in a page, after the header. They should be used to deliver critical service-wide information.

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

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 inline alert type:

  • Information

Display CTA:

  • Hide
  • One CTA link
  • Two CTA links

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Important information: Minor disruption to a particular City service. Bring attention to something we really need to warn users about because it is not normal.


Alert title:


    

  • should be concise and descriptive - avoid long sentences



Alert description:




    

  • message should contain further details



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




    






                
                    







                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Keep the title and description clear and concise so users understand why the information is important and the action(s) to take. Ideally, up to 2 lines of text.



    





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



    





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.



    





If there is a link to further information, the first preference is 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 a global inline alert to repeat the information of a global alert. This can clutter the page and confuse users.



    





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



    





Do not keep global inline 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.



    





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.