Official Banner

The Official Banner identifies official Louisiana Government websites.

On this page:

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

Louisiana State Seal.

An official Louisiana.gov website.

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.

<div class="official-banner">
  <div class="container">
    <div class="row align-items-center">
      <!-- This next column can removed if your digital product doesn’t need to be localized. -->
      <div class="col-lg-5 order-lg-1 text-lg-right">
        <div class="btn-group ml-n2 ml-lg-2" role="group" aria-label="Language Selector Buttons">
          <button type="button" id="Language-Use-English" name="Language-Use-English" class="btn btn-link border-0 bg-transparent shadow-none btn-sm text-white font-weight-bold">English</button>
          <button type="button" id="Language-Use-Espanol" name="Language-Use-Espanol" class="btn btn-link border-0 bg-transparent shadow-none btn-sm text-white">español</button>
          <button type="button" id="Language-Use-Francais" name="Language-Use-Francais" class="btn btn-link border-0 bg-transparent shadow-none btn-sm text-white">français</button>
          <button type="button" id="Language-Use-Vietnamese" name="Language-Use-Vietnamese" class="btn btn-link border-0 bg-transparent shadow-none btn-sm text-white">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="Louisiana State Seal." class="img-official mr-2">
          <div class="media-body">
            <p class="mt-lg-1 mb-0">An official Louisiana.gov website.
              <button class="expander btn btn-link border-0 bg-transparent shadow-none btn-sm text-white" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                How do I know?<span class="fas fa-angle-down ml-1" aria-hidden="true"></span>
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4 mb-1 collapse" id="collapseExample">
      <div class="col-12 col-md-6 col-lg-5">
        <div class="media">
          <img src="/img/icon-dot-gov.svg" alt="" class="align-self-start img-official mr-2">
          <div class="media-body">
            <p class=" mb-0"><span class="font-weight-bolder">The .gov means it&rsquo;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">
        <div class="media">
          <img src="/img/icon-https.svg" alt="" class="align-self-start img-official mr-2">
          <div class="media-body">
            <p class=" mb-0"><span class="font-weight-bolder">The site is secure. </span></p>
            <p class=" mb-0">The <span class="font-weight-bolder">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>
</div>
Previous page
Next page