FR

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