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.

Content guidance

This copy displays a high-priority and often urgent message that patients should know before visiting one of our facilities. Copy should be brief (one to two sentences) and direct to ensure patients receive this message quickly and clearly. Include hyperlinks to a page with more information wherever possible.

Alert colors

Alerts are divided by color. Be sure to note which should be used in the copy doc.

Yellow: Warning alerts

• Use this alert to communicate an urgent message patients should know before visiting one of our facilities.
• Examples:
  • Some Advocate Medical Center facilities closed due to Winter Storm David. Check locations here.
  • Mask mandate now in effect at all locations due to high COVID and flu rates. Please wear a face mask when visiting our facilities.

Red: Error alerts

• Use this alert to communicate technical difficulties or similar errors that patients might encounter. Briefly communicate alternatives to care where relevant.
• Examples:
  • Our phones are currently down. We’re working to resolve this issue as quickly as possible. Thank you for your patience.
  • LiveWell is currently experiencing technical difficulties. We’re working to get this back online as quickly as possible. Please call or visit your provider’s office to schedule care.

Green: Success alert

• Use this alert to communicate recent news or big wins for Advocate Health.
• Examples:
  • Vaccine success! We’re now offering the COVID vaccine to all patients. Learn more and schedule yours now.
  • Big news: Advocate Health hospitals rank among the safest in the nation.

Blue: Info alert

• This alert is used for basic and non-urgent information. It’s often used for seasonal infections rates, such as COVID, cold and flu season.
• Examples:
  • We currently have a limited-visitor policy in place to ensure safe care.
  • Learn more about our seasonal visitor policy & patient guidelines.

Gray: Utility alert

• You can often find this in use on our corporate home page to translate the page to Spanish.
• Example: 
  • Notice of Pixel Class Action Settlement

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.