<section class="usa-banner" aria-label="Official government website">
    <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="../../dist/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">Un sitio oficial del Gobierno de Estados Unidos</p>
                    <p class="usa-banner__header-action" aria-hidden="true">Así es como usted puede verificarlo</p>
                </div>
                <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
                    <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">
            <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="../../dist/img/icon-dot-gov.svg" role="img" alt="Dot gov">
                    <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="../../dist/img/icon-https.svg" role="img" alt="Https">
                    <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-title banner-lock-description">
                                    <title id="banner-lock-title">Lock</title>
                                    <desc id="banner-lock-description">A locked padlock</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>

There are no notes for this item.

{% set tld_text = "$TLD" %}
{% set lock_image = "$LOCK_IMG" %}
{% set lock %}
<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-title banner-lock-description"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">A locked padlock</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>
{% endset %}


<section class="usa-banner" aria-label="Official government website">
  <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="{{ uswds.path }}/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">{{ banner.text }}</p>
          <p class="usa-banner__header-action" aria-hidden="true">{{ banner.action }}</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">{{ banner.action }}</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="{{ uswds.path }}/img/icon-dot-gov.svg" role="img" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>
                {{ domain.heading | safe | replace(tld_text, domain.tld) -}}
              </strong>
              <br/>
              {{ domain.text | safe | replace(tld_text, domain.tld) }}
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="{{ uswds.path }}/img/icon-https.svg" role="img" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>
                {{ https.heading | safe | replace(tld_text, domain.tld) -}}
              </strong>
              <br/>
              {{ https.text | safe | replace(tld_text, domain.tld) | replace(lock_image, lock) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
package:
  name: uswds
  version: 2.9.0
uswds:
  path: ../../dist
banner:
  text: Un sitio oficial del Gobierno de Estados Unidos
  action: Así es como usted puede verificarlo
domain:
  tld: .gov
  heading: |
    Los sitios web oficiales usan $TLD
  text: >
    Un sitio web <strong>$TLD</strong> pertenece a una organización oficial del
    Gobierno de Estados Unidos.
https:
  heading: |
    Los sitios web seguros $TLD usan HTTPS
  text: >
    Un <strong>candado</strong> ($LOCK_IMG) o <strong>https://</strong>
    significa que usted se conectó de forma segura a un sitio web $TLD. 
    Comparta información sensible sólo en sitios web oficiales y seguros.