Small 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.
Small alerts can be on different locations of the page. They should be used to deliver applicable information to users in a highly visible and immediate manner, ensuring that they are promptly informed and able to respond accordingly.
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 a small alert supports.
Select small alert type:
- Warnings
- Warning lifted
- Caution
- Important information
Code
Responsive preview
Alert label:
- should be concise and descriptive
Alert icon:
- serves as a visual cue to correlate with an alert type
Class name | Colour | Recommended icon | Usage |
---|---|---|---|
"warning" or "error" | red |
cicon-exclamation-triangle |
Display system errors messages that users must read before continuing to use an application. Example:
|
"caution" | yellow |
cicon-exclamation-triangle |
Alert users to exercise care or attention regarding specific information. |
"information" | blue |
cicon-exclamation-circle |
Highlight crucial details that users need to know or that will help them performing a task. |
"success" | green |
cicon-check-circle |
Indicates an action that has been completed successfully. Example:
|
Do
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.
Place small alerts inline with the related content, so users know what it refers to.
Error messages must guide the user on how to recover from an error.
Don't
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 Highlighting content, quotes, examples, snippets of information. Use a callout instead.