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

Component resources:
SCSS files

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