ExpressionEngine®
Style Guide

Interaction Guidelines

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.

Wording

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.

e.g.

An Error Occurred

There was a problem processing your submission, please check below and fix all marked errors.

Standard Alert

To create a standard alert box, use div.alert.

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 body tag.

Usage

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.

HTML

<div class="alert">
	...
</div>

back to the top


Inline Alert

To create an inline alert box, use div.alert.inline.

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.

Usage

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.

HTML

<div class="alert inline">
	...
</div>

Visual Output

Box header

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

Alert Heading

Instructional/Informative line of text, explaining reason for this alert.

  • A list item
  • Another list item
  • The last list item

back to the top


back to the top


Alert Types

Alerts must have one of the following alert types.

  • .warn Used to warn an end user of a potential issue with taking an action.
  • .issue Used to communicate a potential issue with a taken action.
  • .success Used to communicate an action was successful.

HTML

<div class="alert warn">
	...
</div>
<div class="alert issue">
	...
</div>
<div class="alert success">
	...
</div>

back to the top


Alert Content

Alerts may contain h3 headings, multiple paragraphs, lists and a close link.

HTML

<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>