Alerts

Color options

Two colors are available for alerts:

  • Blue
  • White

Blue is the recommended color for global alerts, alerts that appear on 20+ pages or alerts with high prominence/urgency.

White should be used for an alert where the content included only relates to a specific page, such as a clinic closure or hours update alert.

Alerts per page

Usage guidelines

Do’s

One global alert (blue) and one contextual alert (white) are allowed per page.

Don’ts

  • Place two blue alerts on the same page
  • Place two white alerts on the same page

Ability to close

Alerts may appear with or without an X to close them.

As a general rule, users should be given the option to ‘close’ alerts that are “universal” in nature, i.e. appear on 20+ pages on the site.

Users should not be given the option to close alerts that are informative and relate to a specific page.

Links

Links are allowed in the alert. The entire text string may be a link, or select words/phrases may be a link.

If there is a list of links, separate each linked phrase with the | symbol.

Linked full text string

Select phrases linked

List of links

Icons

A decorative icon is recommended to create a focal starting point for the user.

In alerts, we leverage SVG icons from the Font Awesome library for ease of implementation.

Usage guidelines

Do’s

  • Alerts may appear with or without an icon.
  • Decorative icons should always be placed on the left.
  • Vertically center the icon with text if the text is 30 characters or less on a single line.
  • Top align icons and text if the text extends beyond 1 line.

Don’ts

  • Vertically center the icon(s) and text if the content exceeds 1 line.
  • Vertically center the icon(s) and text if the text on a single line exceeds 30 characters.

Text and icons should never be vertically centered below the 767 px breakpoint unless the text is 30 characters or less with spaces.

©2021 UW Medicine Brand Resources. All rights reserved.