Notice
Use a Notice to highlight an action, result or message. For quick reference, see technical parameters.
Accessibility
Each theme has a default colour and icon to indicate the type and urgency of the message.
- Colours meet WCAG AAA colour and contrast requirements for accessibility and readability in both light and dark mode.
- Linked text is automatically underlined.
Examples
- Indicates the successful completion of an action or form.
- Appears under the completed action, or in place of the form itself, once the action is successful.
- By default, uses the circle-check icon.
- Highlights a helpful piece of supplementary information, such as a next step or best practice.
- For best results, include only one idea per notice.
- Uses a passive voice.
- Is typically positioned within (or after) the main body of content.
- By default, uses the bulb icon.
- Delivers a temporary message that’s specific to the page.
- Is typically positioned below the main title or between the lead and body of content.
- By default, uses the paper-edit icon.
- Indicates the unsuccessful completion of an action within a form.
- Is typically positioned under the unsuccessful action.
- By default, uses the circle-x icon.
- Prompts the user to pause and read before proceeding.
- For best results, include only one idea per notice.
- Is typically positioned after the lead or within the main body of content.
- By default, uses the alert-triangle icon.
- Delivers a site-wide service message.
- Is typically positioned above the main title, below the breadcrumbs.
- By default, uses the wrench icon.
- Points to supporting documentation or additional content.
- The entire notice component is a link.
- For best results, include only one call to action; use a clear call-to-action verb.
- Can be positioned anywhere within the main body of content.
- By default, uses the touch-finger icon.
Parameters
html_id
Set to "false" to remove the default icon. Must be peer-reviewed by a designer.
icon
To replace the default icon with another. Have all choices peer-reviewed by a designer.
icon_override
Set to "on" to remove the default icon. Must be peer-reviewed by a designer.
link
URL or page/post ID to link to. Applies only to the link theme.
message
Message to display. The content enclosed within the shortcode tags populates this field.
theme
Notice style, including its colour and icon
title
Adds a stylized title above the message text
url_param
Used in combination with the link parameter when a page/post ID is set.