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
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
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
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:
|
"information" | blue |
cicon-exclamation-circle |
Highlight crucial details that users need to know regarding to something specific on a page. Example:
|
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.