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
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
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
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:
|
"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:
|
"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:
|
"information" | blue |
cicon-info-circle |
Important information: Minor disruption to a City service, more related to technology or service change. Example:
|
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.