Components
Banner - Promo
Don't use: deprecated Web
A promo banner is fixed content at the bottom of the viewport used for dismissible announcements such as new tools, news, etc.
Examples
Default
View this in StorybookUsage
When to use va-promo-banner and when to consider something else
Do
- Use for information that is safe to dismiss and can be accessed in other parts of VA.gov
- Be succinct
- Allow the user to dismiss
- Retire promo banners after 30 days from initial posting or sooner, as specified by requestor
Don’t
- Don’t use for critical information
- Don’t write content that will be more than 3 lines on a mobile device
- Don’t prevent user from dismissing
- Use more than one at a time
How to use Promo banners
- Add text, an href prop, an id, and a type prop to the component to have data displayed a the bottom of the viewport with an icon associated with the type chosen.
Types
- Announcement
- Pertains to content focused on benefits: a new tool, a new online benefit application, etc.
- Email Signup
- Points to email signups for various VA updates / alerts / communications.
- News
- Pertains to newly received or noteworthy information about the VA.
Code usage
Accessibility considerations
- By default the close button will have an
aria-labelofDismiss this promo banner. - For all icon elements
aria-hidden="true"will be added to the element.
Provide feedback
Share your feedback, report issues, or suggest improvements for the Banner - Promo component. Your input helps us make the design system better for everyone.
- Get immediate support in #platform-design-system for technical or urgent issues.
- Explore all feedback channels for additional ways to share your input.
Edit this page in GitHub
(Permissions required)
Last updated: May 01, 2026