Components

Banner

Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.

About the banner component

Note: Banners and identifiers are core components. We recommend using both core components on most sites. Together, they are the most recognizable and standardized design elements of a government site.

You should use the banner to identify your site as an official government site.

The banner explains how to identify an official .gov or .mil domain and that these sites have secure HTTPS connections. Using the banner component is the best way to assure visitors that they’re connected to an official site.

Most government sites should use the banner, but some should not use the banner. Do NOT use the banner on non-government domains such as a .com or .org.

If you are unable to update to USWDS 2.8.0 (described on GitHub) or higher but still want to include the new language in your banner, we recommend editing your content to the language outlined in the component preview.

.gov domains

An official website of the United States government

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.

.mil domains

An official website of the United States government

Here’s how you know

Official websites use .mil
A .mil website belongs to an official U.S. Department of Defense organization.

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

.gov domains (Spanish)

Un sitio oficial del Gobierno de Estados Unidos

Así es como usted puede verificarlo

Los sitios web oficiales usan .gov
Un sitio web .gov pertenece a una organización oficial del Gobierno de Estados Unidos.

Los sitios web seguros .gov usan HTTPS
Un candado ( ) o https:// significa que usted se conectó de forma segura a un sitio web .gov. Comparta información sensible sólo en sitios web oficiales y seguros.

.mil domains (Spanish)

Un sitio oficial del Gobierno de Estados Unidos

Así es como usted puede verificarlo

Los sitios web oficiales usan .mil
Un sitio web .mil pertenece a una organización oficial del Departamento de Defensa de EE. UU.

Los sitios web seguros .mil usan HTTPS
Un candado ( ) o https:// significa que usted se conectó de forma segura a un sitio web .mil. Comparta información sensible sólo en sitios web oficiales y seguros.

<h3 class="site-preview-heading">.gov domains</h3>
<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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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-default-default"
        >
          <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-default-default"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-default"
                  focusable="false"
                >
                  <title id="banner-lock-title-default">Lock</title>
                  <desc id="banner-lock-description-default">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) 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>

<h3 class="site-preview-heading">.mil domains</h3>
<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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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-mil-dot-mil"
        >
          <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-mil-dot-mil"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-dot-gov.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Official websites use .mil</strong><br />A
              <strong>.mil</strong> website belongs to an official U.S.
              Department of Defense organization.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-https.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Secure .mil websites use HTTPS</strong><br />A
              <strong>lock</strong> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-dot-mil"
                  focusable="false"
                >
                  <title id="banner-lock-title-dot-mil">Lock</title>
                  <desc id="banner-lock-description-dot-mil">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) or <strong>https://</strong> means you’ve safely connected to
              the .mil website. Share sensitive information only on official,
              secure websites.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<h3 class="site-preview-heading">.gov domains (Spanish)</h3>
<section
  class="usa-banner"
  aria-label="Un sitio oficial del Gobierno de Estados Unidos"
>
  <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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">
            Un sitio oficial del Gobierno de Estados Unidos
          </p>
          <p class="usa-banner__header-action">
            Así es como usted puede verificarlo
          </p>
        </div>
        <button
          type="button"
          class="usa-accordion__button usa-banner__button"
          aria-expanded="false"
          aria-controls="gov-banner-spanish-lang-es"
        >
          <span class="usa-banner__button-text"
            >Así es como usted puede verificarlo</span
          >
        </button>
      </div>
    </header>
    <div
      class="usa-banner__content usa-accordion__content"
      id="gov-banner-spanish-lang-es"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-dot-gov.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web oficiales usan .gov</strong><br />Un sitio
              web <strong>.gov</strong> pertenece a una organización oficial del
              Gobierno de Estados Unidos.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-https.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web seguros .gov usan HTTPS</strong><br />Un
              <strong>candado</strong> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-spanish"
                  focusable="false"
                >
                  <title id="banner-lock-title-spanish">Lock</title>
                  <desc id="banner-lock-description-spanish">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) o <strong>https://</strong> significa que usted se conectó de
              forma segura a un sitio web .gov. Comparta información sensible
              sólo en sitios web oficiales y seguros.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<h3 class="site-preview-heading">.mil domains (Spanish)</h3>
<section
  class="usa-banner"
  aria-label="Un sitio oficial del Gobierno de Estados Unidos,"
>
  <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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">
            Un sitio oficial del Gobierno de Estados Unidos
          </p>
          <p class="usa-banner__header-action">
            Así es como usted puede verificarlo
          </p>
        </div>
        <button
          type="button"
          class="usa-accordion__button usa-banner__button"
          aria-expanded="false"
          aria-controls="gov-banner-mil-spanish-dot-mil-lang-es"
        >
          <span class="usa-banner__button-text"
            >Así es como usted puede verificarlo</span
          >
        </button>
      </div>
    </header>
    <div
      class="usa-banner__content usa-accordion__content"
      id="gov-banner-mil-spanish-dot-mil-lang-es"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-dot-gov.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web oficiales usan .mil</strong><br />Un sitio
              web <strong>.mil</strong> pertenece a una organización oficial del
              Departamento de Defensa de EE. UU.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-https.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web seguros .mil usan HTTPS</strong><br />Un
              <strong>candado</strong> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-dot-mil-spanish"
                  focusable="false"
                >
                  <title id="banner-lock-title-dot-mil-spanish">Lock</title>
                  <desc id="banner-lock-description-dot-mil-spanish">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) o <strong>https://</strong> significa que usted se conectó de
              forma segura a un sitio web .mil. Comparta información sensible
              sólo en sitios web oficiales y seguros.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<h3 class="site-preview-heading">.gov domains</h3>
<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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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-default-default"
        >
          <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-default-default"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-default"
                  focusable="false"
                >
                  <title id="banner-lock-title-default">Lock</title>
                  <desc id="banner-lock-description-default">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) 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>

<h3 class="site-preview-heading">.mil domains</h3>
<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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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-mil-dot-mil"
        >
          <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-mil-dot-mil"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-dot-gov.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Official websites use .mil</strong><br />A
              <strong>.mil</strong> website belongs to an official U.S.
              Department of Defense organization.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-https.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Secure .mil websites use HTTPS</strong><br />A
              <strong>lock</strong> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-dot-mil"
                  focusable="false"
                >
                  <title id="banner-lock-title-dot-mil">Lock</title>
                  <desc id="banner-lock-description-dot-mil">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) or <strong>https://</strong> means you’ve safely connected to
              the .mil website. Share sensitive information only on official,
              secure websites.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<h3 class="site-preview-heading">.gov domains (Spanish)</h3>
<section
  class="usa-banner"
  aria-label="Un sitio oficial del Gobierno de Estados Unidos"
>
  <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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">
            Un sitio oficial del Gobierno de Estados Unidos
          </p>
          <p class="usa-banner__header-action">
            Así es como usted puede verificarlo
          </p>
        </div>
        <button
          type="button"
          class="usa-accordion__button usa-banner__button"
          aria-expanded="false"
          aria-controls="gov-banner-spanish-lang-es"
        >
          <span class="usa-banner__button-text"
            >Así es como usted puede verificarlo</span
          >
        </button>
      </div>
    </header>
    <div
      class="usa-banner__content usa-accordion__content"
      id="gov-banner-spanish-lang-es"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-dot-gov.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web oficiales usan .gov</strong><br />Un sitio
              web <strong>.gov</strong> pertenece a una organización oficial del
              Gobierno de Estados Unidos.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-https.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web seguros .gov usan HTTPS</strong><br />Un
              <strong>candado</strong> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-spanish"
                  focusable="false"
                >
                  <title id="banner-lock-title-spanish">Lock</title>
                  <desc id="banner-lock-description-spanish">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) o <strong>https://</strong> significa que usted se conectó de
              forma segura a un sitio web .gov. Comparta información sensible
              sólo en sitios web oficiales y seguros.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<h3 class="site-preview-heading">.mil domains (Spanish)</h3>
<section
  class="usa-banner"
  aria-label="Un sitio oficial del Gobierno de Estados Unidos,"
>
  <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/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">
            Un sitio oficial del Gobierno de Estados Unidos
          </p>
          <p class="usa-banner__header-action">
            Así es como usted puede verificarlo
          </p>
        </div>
        <button
          type="button"
          class="usa-accordion__button usa-banner__button"
          aria-expanded="false"
          aria-controls="gov-banner-mil-spanish-dot-mil-lang-es"
        >
          <span class="usa-banner__button-text"
            >Así es como usted puede verificarlo</span
          >
        </button>
      </div>
    </header>
    <div
      class="usa-banner__content usa-accordion__content"
      id="gov-banner-mil-spanish-dot-mil-lang-es"
    >
      <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="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-dot-gov.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web oficiales usan .mil</strong><br />Un sitio
              web <strong>.mil</strong> pertenece a una organización oficial del
              Departamento de Defensa de EE. UU.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img
            class="usa-banner__icon usa-media-block__img"
            src="/preview/uswds/uswds-site/al-fix-pa11y3-errors/assets/img/icon-https.svg"
            role="img"
            alt=""
            aria-hidden="true"
          />
          <div class="usa-media-block__body">
            <p>
              <strong>Los sitios web seguros .mil usan HTTPS</strong><br />Un
              <strong>candado</strong> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-dot-mil-spanish"
                  focusable="false"
                >
                  <title id="banner-lock-title-dot-mil-spanish">Lock</title>
                  <desc id="banner-lock-description-dot-mil-spanish">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) o <strong>https://</strong> significa que usted se conectó de
              forma segura a un sitio web .mil. Comparta información sensible
              sólo en sitios web oficiales y seguros.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Guidance

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 don’t use a .gov/.mil domain and HTTPS. The Design System’s banner text identifies .gov and .mil domains and HTTPS as indicators that a website is an official government website. Use this banner only if your site uses both the proper top-level domain (TLD) and HTTPS.
• Any time it would be misleading. The banner should be used to reduce confusion. Avoid using the banner on any site meant only for testing or otherwise not meant to be identified as an official government website.

Usability guidance

• Use the provided text without customization. The banner is most effective as an identifier and a learning tool when its message is consistent across government sites. With only a few exceptions (described in our Implementation guidance), sites should use the TLD-appropriate text provided, unaltered. Use the Spanish version of the banner for Spanish-language websites.
• Use the version appropriate to your website’s TLD. If your project uses a .mil top-level domain, use the .mil banner text.
• Show the banner on every page. Use the banner at the top of every page of a site. It can be confusing or misleading if it appears on some pages and not others.
• Avoid distraction. The banner should appear 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.
• Keep the text up to date. Use the most current version of 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 your content remains accessible in the event the JavaScript does not load or is disabled, you should not set aria-hidden="true" on usa-banner__content.

Using the banner component

• Some .mil websites do not belong to an official U.S. Department of Defense organization. These sites should adapt the Official websites use .mil section to use more technically accurate language: “A .mil website operates under the approval of the U.S. Department of Defense.”
• The banner should directly follow the skipnav component.
• Set the banner background color with $theme-banner-background-color. Banner text will update automatically.

Banner settings

Variable	Description
$theme-banner-background-color	Background color of the banner and its content.
$theme-banner-font-family	The font family of the banner.
$theme-banner-link-color	The color of banner link. Add the link color and the system will generate the hover state. Default uses the default link settings calculated from your background color.
$theme-banner-max-width	Maximum width of the banner content.

Banner variants

This component has no variants.

Package

• Package usage: @forward "usa-banner";
• Dependencies: uswds-fonts, usa-layout-grid, usa-media-block