Components

Banner

The banner identifies your site as an official website of the United States government and helps visitors understand how to tell that it is official.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner-demo">
          <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-demo">
      <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="/assets/img/icon-dot-gov.svg" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When to use the banner component

  • To identify as an official government site. Most government sites should use the banner.

When to consider something else

  • If you use neither https nor a .gov/.mil domain. The banner text calls out https and .gov/.mil domains as ways to communicate that this is an official government site. Don't use the banner if your site doesn't do those things.
  • Any time it would be misleading. The banner should be used to reduce confusion. Avoid using the banner on sites meant only for testing or experiments, or are otherwise not meant to be seen as an official website.

Usability guidance

  • Show the banner on every site page. Use the gov banner at the top of every page of a site. It can be confusioing or misleading if it appears on some site pages and no others.
  • Don't use more than one. Don't use multiple banners at the top of a page to communicate multiple identities, like an agency banner, and a gov banner. Consolidate into a single banner instead.
  • Keep the text up-to-date. Use the most current version of the banner. Use the "Here's how you know" text from the most current version and avoid modification.
  • Use the proper TLD. If your project uses a .mil top-level domain, change the text in the "Here's how you know" section to "The .mil means it's official."
  • Avoid distraction. The banner appears on every page of your site. Choose background colors that fit with your site theme and avoid color combinations that draw excessive attention to the banner.

Accessibility

  • Use aria-label to give the banner a useful name. Our default markup uses aria-label="official government website" to distinguish the banner header from the main header.
  • The banner's accordion uses javascript to set the aria-hidden value of its content area. To ensure that your content is accessible in the event that the JavaScript does not load or is disabled, you should not set aria-hidden="true" on usa-banner__content.

Implementation

  • The banner should directly follow the skipnav component.
  • Set the width of the banner content area with $theme-banner-max-width.
  • Set the banner font with $theme-banner-font-family.

Package information

  • Package usage: @import usa-banner
  • Requires: required, global