Official Banner

Best Practices

• The Official Banner is placed at the top of public-facing websites or web applications.
• If your digital product will only be presented in English, you may omit the column with the language selector buttons.
• Do not customize the Official Banner other than to omit the language selector buttons.

Note: This doesn’t contain the code for switching language, only the markup used to present the buttons used to switch language.

Usage

English español français Tiếng Việt

An official Louisiana.gov website. How do I know?

The .gov means it's official.

Louisiana government websites often end in .gov. Before sharing sensitive information, make sure you’re on a Louisiana government site.

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.

<section class="official-banner" role="banner" aria-label="Louisiana.gov Website">
  <div class="container">
    <div class="row align-items-center">
      <!-- This column can removed if your digital product doesn’t need to be localized. -->
      <div class="col-lg-5 order-lg-1 text-lg-right text-lg-end">
        <div class="btn-group ms-n2 ms-lg-2" role="group" aria-label="Language Selector Buttons">
          <button type="button" id="Language-Use-English" name="Language-Use-English" class="btn">English</button>
          <button type="button" id="Language-Use-Espanol" name="Language-Use-Espanol" class="btn">español</button>
          <button type="button" id="Language-Use-Francais" name="Language-Use-Francais" class="btn">français</button>
          <button type="button" id="Language-Use-Vietnamese" name="Language-Use-Vietnamese" class="btn">Tiếng Việt</button>
        </div>
      </div>
      <!-- Keep this column even if you you remove the localization column. -->
      <div class="col-lg-7">
        <div class="media align-items-center">
          <img src="/img/Louisiana-State-Seal.png" alt="Official Louisiana State Seal." class="img-official me-2">
          <div class="media-body">
            <p class="mt-lg-1 mb-0">An official Louisiana.gov website.
              <button class="btn expander" type="button" data-toggle="collapse" data-target="#collapseExample" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                How do I know?<span class="icon fas fa-angle-down ms-1" aria-hidden="true"></span>
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4 mb-1 collapse" id="collapseExample" role="list">
      <div class="col-12 col-md-6 col-lg-5" role="listitem" aria-labelledby="official">
        <div class="media">
          <img src="/img/icon-dot-gov.svg" alt="" class="align-self-start img-official me-2" aria-hidden="true">
          <div class="media-body">
            <p id="official" class="mb-0"><span class="fw-bold">The .gov means it's official.</span></p>
            <p class="mb-0">Louisiana government websites often end in .gov. Before sharing sensitive information, make sure you&rsquo;re on a Louisiana government site.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-5 offset-lg-1" role="listitem" aria-labelledby="secure">
        <div class="media">
          <img src="/img/icon-https.svg" alt="" class="align-self-start img-official me-2" aria-hidden="true">
          <div class="media-body">
            <p id="secure" class="mb-0"><span class="fw-bold">The site is secure. </span></p>
            <p class="mb-0">The <span class="fw-bold">https://</span> 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>
</section>