Notices

Use notices to display content that is particularly urgent. Notices are meant to be temporary and timely and should only be used to communicate an exceptional condition.


Overview

Here’s an example notice:

Event postponed

Due to inclement weather, Thursday’s event has been postponed. Learn more

To prevent visitors from ignoring the presence of notices, avoid using notices to describe a circumstance that exists longer than a week or so. Limiting notice content to 25 words or less and avoiding exclamation points (!) helps keep communication concise, effective, and professional. Providing a link to additional information makes this easier, while being useful for visitors. A title is optional, and often unnecessary.

Notices have a light blue background by default. For exceptionally critical messages, the “urgent” style may be used instead:

Campus police telephone system temporarily not working. Learn more

Notices have expiration dates to encourage timely content. By default, expired notices are hidden automatically from visitors, but this can be overridden.

Notices are also user-dismissible by default. Visitors returning to the same page repeatedly may decide not to be confronted with the same notice each time. This option can be disabled, as in the above examples. Dismissible notices will display a Notice dismiss icon icon in the upper right corner.

Dismiss message

Dismissing this notice will hide it for 30 days.

Changing the content of a dismissible notice will make it visible again for any visitor who has previously dismissed it. This way, visitors will not miss out on new or revised information.

Adding a Notice

On sites using the Block Editor, notices (Notice block editor icon) can be added from the block library, under the Component Library section. Notice content can be edited directly, and options can be set in the sidebar.

On sites using the older Visual Editor, notices can be added by choosing the Notice pictograph (Notice WYSIWYG toolbar icon) from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the notice later, double-click the notice preview to show the editor dialogue again.


Technical Details

Notices can be implemented with the shortcode cl-notice.

[cl-notice title="Alert"]The notice content.[/cl-notice]

Attributes

title

(string) (required)

The title of the notice

style

(string) (optional) (values: urgent, covid19)

Set the style of the notice

(default value: none)

expiration

(string) (optional)

Set an expiration date specified in any PHP date/time format

(default value: none)

show_expired

(bool) (optional)

Set to continue displaying the notice once it’s expired, if expiration is set

(default value: false)

dismissible

(bool) (optional)

Set to prevent the notice from being dismissible

(default value: true)

class

(string) (optional)

Set custom CSS class(es)

(default value: none)