A01 Alerts

An alert bar is a full-width banner positioned at the top of the page that displays high-priority messages or notifications. It ensures important information is immediately visible, helping users quickly notice and respond without distraction.

 

Component requirements

Required:

  • Alert type: Dropdown. Defines the style of the alert. Info/Error/Success/Utility/Warning. Default: Info.
  • Alert function: Dropdown. Dismissible/Expanding. Default: Dismissible.
  • Dismiss period: Dropdown. 1 Day/1 Week/1 Month/End of session. Default: 1 Day.
  • Primary alert text: Rich text field.

Optional:

  • Hide icon: Checkbox. Default: unchecked.

  • Expanded alert text: Rich text field.

  • Mobile alert text: Rich text field.

Additional component notes:

  • Content within the alert should always be aligned to the left.
  • Multiple alerts are possible in which case they will stack.

 

ADA requirements

  • The site alert bar includes an ARIA label to ensure assistive technologies can accurately convey its content.
  • The alert bar is fully removed from the page when not in use, rather than being merely hidden.
  • Collapsible functionality is labeled with aria-controls for proper accessibility.
  • All icons are marked as decorative so they do not interfere with screen readers.