Banners overview
Messaging banners
Tasks banners
Content banners
Standard scope
This standard applies to:
- pennmedicine.org
- All Penn Medicine websites
- Penn Medicine mobile applications
- All Penn Medicine digital products
Overview
Banners are typically used to:
- Communicate critical information: Display important updates, alerts, announcements, or calls-to-action, often these messages are time-sensitive or temporary.
- Guide user behavior: Encourage actions like signing up, upgrading, or acknowledging changes.
- Improve visibility: Ensure key information is seen without needing to scroll or search.
Banners may include a dismiss button, icon, or media, and can appear persistently or temporarily based on context.
Banner types
Banner type
When to use
Design options
Messaging banners are designed to immediately draw attention to important information or to help a user resolve an error. Alert banners are often placed above the hero section and error banners are often placed below the search bar section.
- Alert banner
- Error message banner
Task banners are designed to feature actions a user can take to complete tasks. They are most commonly used on the homepage or landing pages.
- Task banner
- Footer banner
- Print banner
Content banners are flexible components used to introduce, highlight, or supplement other content. They can be placed within sections of a page or adjacent to editorial content.
- Generic banner
- Article supplemental banner
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
Last updated
Date
Version
Description
05/01/2025
1.0.0
Initial Release