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

Promo banners

Promo banners are fixed content used for dismissible announcements such as new tools, news, etc.

Benefit announcements

Pertains to content focused on benefits: a new tool, a new online benefit application, etc.

React version
<div class="vads-c-promo-banner">
  <div class="vads-c-promo-banner__body">
    <div class="vads-c-promo-banner__content">
      <div class="vads-c-promo-banner__content-icon">
        <span class="fa-stack fa-lg">
          <i class="vads-u-color--white fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-bullhorn fa-stack-1x"></i>
        </span>
      </div>
      <a class="vads-c-promo-banner__content-link" href="#">This is some text <i class="fas fa-angle-right"></i></a>
    </div>

    <div class="vads-c-promo-banner__close">
      <button type="button" aria-label="Dismiss this announcement" onClick="" class="va-button-link vads-u-margin-top--1">
        <i class="fas fa-times-circle vads-u-font-size--lg"></i>
      </button>
    </div>
  </div>
</div>

Email signup

Points to email signups for various VA updates / alerts / communications.

React version
<div class="vads-c-promo-banner">
  <div class="vads-c-promo-banner__body">
    <div class="vads-c-promo-banner__content">
      <div class="vads-c-promo-banner__content-icon">
        <span class="fa-stack fa-lg">
          <i class="vads-u-color--white fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-envelope fa-stack-1x"></i>
        </span>
      </div>
      <a class="vads-c-promo-banner__content-link" href="#">This is some text <i class="fas fa-angle-right"></i></a>
    </div>

    <div class="vads-c-promo-banner__close">
      <button type="button" aria-label="Dismiss this announcement" onClick="" class="va-button-link vads-u-margin-top--1">
        <i class="fas fa-times-circle vads-u-font-size--lg"></i>
      </button>
    </div>
  </div>
</div>

News stories

Pertains to newly received or noteworthy information about the VA.

React version
<div class="vads-c-promo-banner">
  <div class="vads-c-promo-banner__body">
    <div class="vads-c-promo-banner__content">
      <div class="vads-c-promo-banner__content-icon">
        <span class="fa-stack fa-lg">
          <i class="vads-u-color--white fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-newspaper fa-stack-1x"></i>
        </span>
      </div>
      <a class="vads-c-promo-banner__content-link" href="#">This is some text <i class="fas fa-angle-right"></i></a>
    </div>

    <div class="vads-c-promo-banner__close">
      <button type="button" aria-label="Dismiss this announcement" onClick="" class="va-button-link vads-u-margin-top--1">
        <i class="fas fa-times-circle vads-u-font-size--lg"></i>
      </button>
    </div>
  </div>
</div>

Guidance

  • Fixed to the bottom of the viewport
  • In Formation’s current version, you will need to implement your own dismiss function

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