Banner

The banner identifies official websites of government organizations in the United States. It also displays an expandable section that helps users understand how to identify official .gov sites and secure HTTPS connections.

Default Banner

Component Preview

Here's how you know

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

Component Code


<section class="usa-banner" aria-label="Official website of the United States government">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img aria-hidden="true" class="usa-banner__header-flag" src="/civic-guide/uswds/img/us_flag_small.png" alt="" />
        </div>
        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
          <p class="usa-banner__header-text">
            An official website of the United States government
          </p>
          <p class="usa-banner__header-action">Here's how you know</p>
        </div>
        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here's how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/civic-guide/uswds/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true" />
          <div class="usa-media-block__body">
            <p>
              <strong>Official websites use .gov</strong><br />A
              <strong>.gov</strong> website belongs to an official government
              organization in the United States.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/civic-guide/uswds/img/icon-https.svg" role="img" alt="" aria-hidden="true" />
          <div class="usa-media-block__body">
            <p>
              <strong>Secure .gov websites use HTTPS</strong><br />A
              <strong>lock</strong> or <strong>https://</strong> means you've safely connected to
              the .gov website. Share sensitive information only on official,
              secure websites.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Expanded Banner

Component Preview

Here's how you know

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

Component Code


<section class="usa-banner" aria-label="Official website of the United States government">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img aria-hidden="true" class="usa-banner__header-flag" src="/civic-guide/uswds/img/us_flag_small.png" alt="" />
        </div>
        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
          <p class="usa-banner__header-text">
            An official website of the United States government
          </p>
          <p class="usa-banner__header-action">Here's how you know</p>
        </div>
        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="true" aria-controls="gov-banner-expanded">
          <span class="usa-banner__button-text">Here's how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner-expanded">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/civic-guide/uswds/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true" />
          <div class="usa-media-block__body">
            <p>
              <strong>Official websites use .gov</strong><br />A
              <strong>.gov</strong> website belongs to an official government
              organization in the United States.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/civic-guide/uswds/img/icon-https.svg" role="img" alt="" aria-hidden="true" />
          <div class="usa-media-block__body">
            <p>
              <strong>Secure .gov websites use HTTPS</strong><br />A
              <strong>lock</strong> or <strong>https://</strong> means you've safely connected to
              the .gov website. Share sensitive information only on official,
              secure websites.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Guidance

When to use the banner component

Use the banner on all government websites to help establish trust and communicate the official nature of the site to users.

The banner helps users identify that the website they're visiting is an official government website, which is especially important for sensitive transactions or information sharing.

When to consider something else

Non-government websites.: The banner is specifically designed for U.S. government websites. Do not use it on non-government sites, as this would be misleading to users.
Sites that don't use .gov or .mil domains.: If your site doesn't use a .gov or .mil domain, the banner content about official websites may not apply. Consider whether using the banner is appropriate for your situation.

Usability guidance

Place the banner at the very top of the page.: The banner should appear above all other content, including the site header. This ensures users see it first when visiting the site.
Don't modify the banner content.: The language in the banner has been carefully crafted and tested. Avoid changing the text, as modifications may reduce the banner's effectiveness in building user trust.
Keep the banner collapsed by default.: The expanded content should only be shown when users click "Here's how you know." This keeps the banner compact and non-intrusive while still providing additional information for users who want it.
Use the appropriate banner language for your audience.: USWDS provides both English and Spanish versions of the banner. Use the language that best serves your site's primary audience.

Accessibility guidance

Use proper heading levels.: Ensure the banner's heading structure fits within your page's overall heading hierarchy. The banner uses semantic HTML that supports screen readers.
Ensure keyboard accessibility for expand/collapse.: Users must be able to expand and collapse the banner content using only a keyboard. The button should be focusable and respond to Enter and Space key presses.
Use appropriate ARIA attributes.: The banner button uses aria-expanded to indicate the current state and aria-controls to associate the button with the expandable content region.
Provide meaningful alt text for icons.: Decorative icons like the flag should use aria-hidden="true" and empty alt text. The lock icon includes a title element for screen reader users.

USWDS Documentation

For more guidance, view the USWDS Banner Component Documentation.

Settings

Variable	Description
`$theme-banner-background-color`	Background color of the banner.
`$theme-banner-font-family`	Font family of the banner text.
`$theme-banner-link-color`	Color of links in the banner.
`$theme-banner-max-width`	Maximum width of the banner content area.

Variants

Variant	Description
`.usa-banner`	The default banner component with expand/collapse functionality.
`aria-expanded="true"`	Shows the banner in its expanded state, revealing the "Here's how you know" content.
`lang="es"`	Spanish language variant of the banner with translated content.

Banner

Default Banner

View Component Code

Expanded Banner

Component Code

View Component Code

Guidance

When to use the banner component

When to consider something else

Usability guidance

Accessibility guidance

USWDS Documentation

Settings

Variants