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 “” icon in the upper right corner.
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 () 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 () 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)