Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Banner - Promo

Use: Deployed
A promo banner is fixed content at the bottom of the viewport used for dismissible announcements such as new tools, news, etc.

Examples

Default

See this in Storybook

Usage

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

Attributes and Properties

Property Attribute Type Default Description
disableAnalytics disable-analytics boolean false Analytics tracking function(s) will not be called
href href string `href` attribute for the anchor tag.
type type "announcement" | "email-signup" | "news" Controls which icon gets used. Options are 'announcement', 'news', or 'email-signup'.

Events

Name Description
closeEvent Fires when the component is closed by clicking on the close icon.
component-library-analytics The event used to track usage of the component. This is emitted when an anchor link or the dismiss icon is clicked and disableAnalytics is not true.

Accessibility considerations

  • By default the close button will have an aria-label of Dismiss this promo banner.
  • For all icon elements aria-hidden="true" will be added to the element.
Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2024