System alerts should be used when ExpressionEngine encounters an anomaly that the current, or a future user should be aware of. There are three types of alerts available currently. Standard, Banner, and Inline.
All alerts should follow a wording structure for consistency. They should contain a heading, that describes the type of message, and paragraphs and/or lists that provide detail to the message. These alerts are user feedback, and as such should provide as much detail as needed to be clear, and concise without creating potential security vulnerabilities.
An Error Occurred
There was a problem processing your submission, please check below and fix all marked errors.
To create a standard alert box, use
A standard alert box will appear at the top of the browser viewport, overlaying CP navigation.
The standard alert should be used to give the end user important global CP information, that they should act on.
Note: A standard alert's HTML should be placed just inside the closing
A standard alert sits atop of the main navigation in ExpressionEngine, and is dismiss-able. This alert type should be used to alert a user to the existence of a system wide anomaly that requires their attention. e.g. Software deprecation notices.
<div class="alert"> ... </div>
To create an inline alert box, use
An inline alert is used in forms, to indicate important instructions and to indicate issues with/successful form submissions.
You may nest and stack alerts.
When stacking alerts, any always shown alerts, must maintain their original location.
Dynamically generated alerts must appear below always shown alerts.
Note: An inline alert's HTML should be place inside the opening form tag.
An inline alert sits inline to the content, and is not dismiss-able. This alert type should be used to alert a user to the existence of a content anomaly, note, error, or success. e.g. Form submissions, success and error messages.
Stacked inline alerts should stack under any inline alerts that already exist. e.g. A form has a permanent inline warning, any success or error alerts should appear below that warning.
<div class="alert inline"> ... </div>
Alerts must have one of the following alert types.
.warnUsed to warn an end user of a potential issue with taking an action.
.issueUsed to communicate a potential issue with a taken action.
.successUsed to communicate an action was successful.
<div class="alert warn"> ... </div> <div class="alert issue"> ... </div> <div class="alert success"> ... </div>
Alerts may contain
h3 headings, multiple paragraphs, lists and a close link.
<div class="alert"> <h3>Heading</h3> <p>...</p> <ul> <li>A list item</li> <li>Another list item</li> <li>The last list item</li> </ul> <a class="close" href=""></a> </div>