Standard scope
This standard applies to:
- pennmedicine.org
- All Penn Medicine websites
- Penn Medicine mobile applications
- All Penn Medicine digital products
Overview
Messaging banners are typically used to:
- Deliver urgent or high-priority messages: Share important updates related to system status, service disruptions, urgent updates, or user errors.
- Prompt users to take action: Direct users to learn more, resolve an issue, or acknowledge the message.
- Support accessibility and clarity: Use visual hierarchy, color cues and concise language for easy scanning and comprehension.
Use cases
The following table provides a summary of use cases for messaging banners. Visual examples for each banner type and a list of content elements are also provided.
Design System name
Banner-Alert
The secondary alert banner in muted tones is used for moderate and lower priority alerts such as travel warnings, general system notifications or minor disruptions.
The green alert banner is used for status updates, confirmations or other informational notices.
8-col: 1 banner/row
Banner-ErrorMessage
8-col: 1 banner/row
Alert banner
The alert banner includes the following elements:
- Alert icon
- Title - Bold and high contrast
- Body copy
- Informational icon
- CTA link
- Dismiss button
The primary alert banner displays in red to indicate urgency.
The secondary alert banner displays in light red or muted tones to differentiate from critical alerts. The title is not bold.
The green alert banner displays in green to indicate a positive or neutral status.
Error message banner
The error message banner includes the following elements:
- Title
- Highlighted search term (when used for search errors)
- Body copy
- Bullet list
- Support contact link
- Image
Behavior
Alert banners
Interactive
- Interactive alerts contain links or buttons that guide users to relevant actions (e.g., “Learn more”).
- Dismissible alerts include a close button that allows users to remove the banner from view.
States
- Hover state: For interactive alerts, the CTA link changes color upon hover.
- Dismiss state: Clicking the dismiss button immediately removes the alert
Error message banners
Interactive
- Support contact link is clickable and directs users to a help page or contact form.
Customizable elements
Messaging banners offer a flexible structure, allowing for customization of content. The layout supports a variety of elements that can be toggled on or off to create a tailored experience. Below are the key components of the design.
Alert banners
Primary banner: Bold text, clearly a priority for most users.
Secondary banner: Not bold, may not impact all users.
Green banner: Not bold, informative and positive.
Error message banner
Guidelines
Alert Banners
Do
- Use the primary alert banner for critical updates, secondary alert banner for less critical updates, and green alert banners for confirmations or informative updates.
- Keep messages short and actionable.
Don't
- Overuse primary alerts—reserve red banners for truly critical information.
- Use dismissible alerts for messages that should always remain visible.
- Overload the banner with too much text—keep messages scannable.
Error Message Banner
Do
- Ensure the search term is dynamically included, surrounded by quote marks, within the message.
- Provide clear and useful suggestions to help users refine their search.
- Use an image or icon list if it adds value to the user experience.
- Include a if users may need further assistance.
Don't
- Use overly complex language.
- Display a blank error message without useful suggestions.
- Overload the banner with too much text—keep it concise and scannable.
Related resources
For designers: Visit the Designers section for access to component specs and Figma files.
For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.
Contact
For more information about this standard, email: web-standards@pennmedicine.upenn.edu