Alert banner

The alert banner pattern utilizes our container component and is used to communicate informational messages that affect uhc consumers such as: national health or weather emergencies, phone lines being down and enrollment periods.

When to use

For informational messages that affect uhc consumers such as: national health or weather emergencies, phone lines being down and enrollment periods

When not to use

For system status or validation messages
For promotional or general content
To pair with imagery

Anatomy

Container: container should be authored to bright blue 10% background color and full width with 10px vertical padding
Content: the content can be flexible, but at a minimum should be a link to more information

Demos & variations

Homepage

If the alert banner is only needed on the homepage or a personalized homepage experience, author using an experience fragment.

Single page

If the alert banner is needed on a single page besides the homepage, author using the container component.

Global alert

If the alert banner is needed globally across the site this can be achieved in Adobe Target.

Placement

The alert banner pattern should be placed right below the global header.

Stacked alerts

We can display up to two alerts and they should be stacked on top of each other below the global header with the top alert having a white background color and the second alert having a bright blue 10% background color.

Behaviors

An alert banner should have a link or call to action to further information on the alert either on uhc.com or offsite.

Mouse

Users can click on a link or call to action.

Keyboard

Users can navigate to a link or call to action by pressing Tab and Shift-Tab. Users can trigger a link or call to action by pressing Enter when the call to action has focus.