Templates

Multiple sign-in options

Use one landing page for all sign-in options.

About the multiple sign-in options template

If you have multiple sign-in options, use this template to guide users to access their account through a prioritized option.

Multiple sign-in

Multiple sign-in options

Multiple sign-in (Spanish)

Multiple sign-in options Demo Multiple sign-in Demo Multiple sign-in (Spanish) 

<body>
  <a class="usa-skipnav" href="#main-content">Skip to main content</a>
  <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="/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"
          >
            <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"
      >
        <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"
              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="/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"
                    focusable="false"
                  >
                    <title id="banner-lock-title">Lock</title>
                    <desc id="banner-lock-description">
                      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>
  <div class="usa-overlay"></div>
  <header class="usa-header usa-header--basic">
    <div class="usa-nav-container">
      <div class="usa-navbar">
        <div class="usa-logo">
          <em class="usa-logo__text"
            ><a href="/" title="<Project title>">&lt;Project title&gt;</a></em
          >
        </div>
      </div>
    </div>
  </header>
  <main id="main-content">
    <div class="bg-base-lightest">
      <section class="grid-container usa-section">
        <div
          class="grid-row margin-x-neg-205 margin-bottom-7 flex-justify-center"
        >
          <div
            class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205 margin-bottom-7"
          >
            <h1
              class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3"
            >
              &lt;A tagline that explains the benefit of creating an
              account.&gt;
            </h1>
            <div
              class="bg-white padding-y-3 padding-x-5 border border-base-lighter"
            >
              <h1 class="margin-bottom-1">Sign in to your account</h1>
              <div class="usa-prose">
                <p class="margin-top-1">
                  You can access your account by signing in with one of the
                  options below.
                </p>
              </div>
              <p>
                <a
                  href="javascript:void()"
                  class="usa-button usa-button--outline width-full"
                  >Sign in with Login.gov</a
                >
              </p>
              <p>
                <a
                  href="javascript:void()"
                  class="usa-button usa-button--outline width-full"
                  >Sign in with &lt;Legacy system 1&gt;</a
                >
              </p>
              <p>
                <a
                  href="javascript:void()"
                  class="usa-button usa-button--outline width-full"
                  >Sign in with &lt;Legacy system 2&gt;</a
                >
              </p>
              <div
                class="border-top border-base-lighter margin-top-6 padding-top-1"
              >
                <p><strong>Don't have an account?</strong></p>
                <p>If you don’t have an account already, sign up here:</p>
                <p>
                  <a href="javascript:void()" class="usa-button width-full"
                    >Create Login.gov account</a
                  >
                </p>
              </div>
            </div>
          </div>
          <div
            class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205"
          >
            <h2 class="display-none desktop:display-block">
              &lt;A tagline that explains the benefit of creating an
              account.&gt;
            </h2>
            <div class="usa-prose">
              <p>
                <here
                  ’s
                  space
                  for
                  a
                  longer
                  description
                  to
                  introduce
                  3-5
                  easily
                  scannable
                  bullet
                  points.
                  note
                  that
                  on
                  mobile,
                  this
                  text
                  block
                  will
                  bump
                  below
                  the
                  create
                  account
                  form.
                ></here>
              </p>
              <section class="usa-graphic-list">
                <div class="usa-graphic-list__row">
                  <div class="usa-media-block margin-y-2">
                    <img
                      class="usa-media-block__img height-7 width-7"
                      src="/assets/img/circle-gray-20.svg"
                      alt=""
                    />
                    <div class="usa-media-block__body">
                      <p>
                        <strong>Value proposition 1:</strong> Vivamus nec velit
                        sed leo scelerisque laoreet vestibulum.
                      </p>
                    </div>
                  </div>
                  <div class="usa-media-block margin-y-2">
                    <img
                      class="usa-media-block__img height-7 width-7"
                      src="/assets/img/circle-gray-20.svg"
                      alt=""
                    />
                    <div class="usa-media-block__body">
                      <p>
                        <strong>Value proposition 1:</strong> Vivamus nec velit
                        sed leo scelerisque laoreet vestibulum.
                      </p>
                    </div>
                  </div>
                  <div class="usa-media-block margin-y-2">
                    <img
                      class="usa-media-block__img height-7 width-7"
                      src="/assets/img/circle-gray-20.svg"
                      alt=""
                    />
                    <div class="usa-media-block__body">
                      <p>
                        <strong>Value proposition 3:</strong> Vivamus nec velit
                        sed leo scelerisque laoreet vestibulum.
                      </p>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div
              class="border-top border-base-lighter margin-top-3 padding-top-1"
            >
              <h2>Are you a federal employee?</h2>
              <div class="usa-prose">
                <p>
                  If you are a federal employee or &lt;other secondary user&gt;,
                  please use &lt;secondary Single Sign On (SSO)&gt;.
                </p>
                <p>
                  <a class="usa-button usa-button--outline" href=""
                    >Launch secondary SSO</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
  <footer class="usa-footer">
    <div class="grid-container usa-footer__return-to-top">
      <a href="#">Return to top</a>
    </div>
    <div class="usa-footer__primary-section">
      <nav class="usa-footer__nav" aria-label="Footer navigation">
        <ul class="grid-row grid-gap">
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
        </ul>
      </nav>
    </div>
    <div class="usa-footer__secondary-section">
      <div class="grid-container">
        <div class="grid-row grid-gap">
          <div
            class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
          >
            <div class="mobile-lg:grid-col-auto">
              <img
                class="usa-footer__logo-img"
                src="/assets/img/logo-img.png"
                alt=""
              />
            </div>
            <div class="mobile-lg:grid-col-auto">
              <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
            </div>
          </div>
          <div class="usa-footer__contact-links mobile-lg:grid-col-6">
            <div class="usa-footer__social-links grid-row grid-gap-1">
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/facebook.svg"
                    alt="Facebook"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/twitter.svg"
                    alt="Twitter"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/youtube.svg"
                    alt="YouTube"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/instagram.svg"
                    alt="Instagram"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/rss_feed.svg"
                    alt="RSS"
                /></a>
              </div>
            </div>
            <p class="usa-footer__contact-heading">
              &lt;Agency Contact Center&gt;
            </p>
            <address class="usa-footer__address">
              <div class="usa-footer__contact-info grid-row grid-gap">
                <div class="grid-col-auto">
                  <a href="tel:1-800-555-5555">&lt;(800) 555-GOVT&gt;</a>
                </div>
                <div class="grid-col-auto">
                  <a href="mailto:info@agency.gov">&lt;info@agency.gov&gt;</a>
                </div>
              </div>
            </address>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div class="usa-identifier">
    <section
      class="usa-identifier__section usa-identifier__section--masthead"
      aria-label="Agency identifier"
    >
      <div class="usa-identifier__container">
        <div class="usa-identifier__logos">
          <a href="javascript:void(0)" class="usa-identifier__logo"
            ><img
              class="usa-identifier__logo-img"
              src="/assets/img/circle-gray-20.svg"
              alt="&lt;Parent agency&gt; logo"
              role="img"
          /></a>
        </div>
        <section
          class="usa-identifier__identity"
          aria-label="Agency description"
        >
          <p class="usa-identifier__identity-domain">domain.gov</p>
          <p class="usa-identifier__identity-disclaimer">
            An official website of the
            <a href="javascript:void()">&lt;Parent agency&gt;</a>
          </p>
        </section>
      </div>
    </section>
    <nav
      class="usa-identifier__section usa-identifier__section--required-links"
      aria-label="Important links"
    >
      <div class="usa-identifier__container">
        <ul class="usa-identifier__required-links-list">
          <li class="usa-identifier__required-links-item">
            <a
              href="javascript:void(0)"
              class="usa-identifier__required-link usa-link"
              >About &lt;Parent shortname&gt;</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Accessibility support</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >FOIA requests</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >No FEAR Act data</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Office of the Inspector General</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Performance reports</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Privacy policy</a
            >
          </li>
        </ul>
      </div>
    </nav>
    <section
      class="usa-identifier__section usa-identifier__section--usagov"
      aria-label="U.S. government information and services"
    >
      <div class="usa-identifier__container">
        <div class="usa-identifier__usagov-description">
          Looking for U.S. government information and services?
        </div>
        <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
      </div>
    </section>
  </div>
</body>

<body>
  <a class="usa-skipnav" href="#main-content">Skip to main content</a>
  <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="/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-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-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="/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="/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"
                    focusable="false"
                  >
                    <title id="banner-lock-title">Lock</title>
                    <desc id="banner-lock-description">
                      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>
  <div class="usa-overlay"></div>
  <header class="usa-header usa-header--basic">
    <div class="usa-nav-container">
      <div class="usa-navbar">
        <div class="usa-logo">
          <em class="usa-logo__text"
            ><a href="/" title="<Project title>">&lt;Project title&gt;</a></em
          >
        </div>
      </div>
    </div>
  </header>
  <main id="main-content">
    <div class="bg-base-lightest">
      <section class="grid-container usa-section">
        <div
          class="grid-row margin-x-neg-205 margin-bottom-7 flex-justify-center"
        >
          <div
            class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205 margin-bottom-7"
          >
            <h1
              class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3"
            >
              &lt;A tagline that explains the benefit of creating an
              account.&gt;
            </h1>
            <div
              class="bg-white padding-y-3 padding-x-5 border border-base-lighter"
            >
              <h1 class="margin-bottom-1">Ingrese a su cuenta</h1>
              <div class="usa-prose">
                <p class="margin-top-1">
                  Usted puede acceder a su cuenta con una de las opciones
                  siguientes.
                </p>
              </div>
              <p>
                <a
                  href="javascript:void()"
                  class="usa-button usa-button--outline width-full"
                  >Ingrese con Login.gov</a
                >
              </p>
              <p>
                <a
                  href="javascript:void()"
                  class="usa-button usa-button--outline width-full"
                  >Ingrese con &lt;Legacy system 1&gt;</a
                >
              </p>
              <p>
                <a
                  href="javascript:void()"
                  class="usa-button usa-button--outline width-full"
                  >Ingrese con &lt;Legacy system 1&gt;</a
                >
              </p>
              <div
                class="border-top border-base-lighter margin-top-6 padding-top-1"
              >
                <p><strong></strong></p>
                <p>Si todavía no tiene una cuenta, regístrese aquí:</p>
                <p>
                  <a href="javascript:void()" class="usa-button width-full"
                    >Cree una cuenta en Login.gov</a
                  >
                </p>
              </div>
            </div>
          </div>
          <div
            class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205"
          >
            <h2 class="display-none desktop:display-block">
              &lt;A tagline that explains the benefit of creating an
              account.&gt;
            </h2>
            <div class="usa-prose">
              <p>
                <here
                  ’s
                  space
                  for
                  a
                  longer
                  description
                  to
                  introduce
                  3-5
                  easily
                  scannable
                  bullet
                  points.
                  note
                  that
                  on
                  mobile,
                  this
                  text
                  block
                  will
                  bump
                  below
                  the
                  create
                  account
                  form.
                ></here>
              </p>
              <section class="usa-graphic-list">
                <div class="usa-graphic-list__row">
                  <div class="usa-media-block margin-y-2">
                    <img
                      class="usa-media-block__img height-7 width-7"
                      src="/assets/img/circle-gray-20.svg"
                      alt=""
                    />
                    <div class="usa-media-block__body">
                      <p>
                        <strong>Value proposition 1:</strong> Vivamus nec velit
                        sed leo scelerisque laoreet vestibulum.
                      </p>
                    </div>
                  </div>
                  <div class="usa-media-block margin-y-2">
                    <img
                      class="usa-media-block__img height-7 width-7"
                      src="/assets/img/circle-gray-20.svg"
                      alt=""
                    />
                    <div class="usa-media-block__body">
                      <p>
                        <strong>Value proposition 1:</strong> Vivamus nec velit
                        sed leo scelerisque laoreet vestibulum.
                      </p>
                    </div>
                  </div>
                  <div class="usa-media-block margin-y-2">
                    <img
                      class="usa-media-block__img height-7 width-7"
                      src="/assets/img/circle-gray-20.svg"
                      alt=""
                    />
                    <div class="usa-media-block__body">
                      <p>
                        <strong>Value proposition 3:</strong> Vivamus nec velit
                        sed leo scelerisque laoreet vestibulum.
                      </p>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div
              class="border-top border-base-lighter margin-top-3 padding-top-1"
            >
              <h2>¿Es usted un empleado federal?</h2>
              <div class="usa-prose">
                <p>
                  Si es un empleado federal &lt;u otro tipo de usuario
                  secundario&gt;, por favor use &lt;Single Sign On (SSO)
                  secundario&gt;.
                </p>
                <p>
                  <a class="usa-button usa-button--outline" href=""
                    >Inicie SSO secundario</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
  <footer class="usa-footer">
    <div class="grid-container usa-footer__return-to-top">
      <a href="#">Subir</a>
    </div>
    <div class="usa-footer__primary-section">
      <nav class="usa-footer__nav" aria-label="Footer navigation">
        <ul class="grid-row grid-gap">
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</a
            >
          </li>
        </ul>
      </nav>
    </div>
    <div class="usa-footer__secondary-section">
      <div class="grid-container">
        <div class="grid-row grid-gap">
          <div
            class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
          >
            <div class="mobile-lg:grid-col-auto">
              <img
                class="usa-footer__logo-img"
                src="/assets/img/logo-img.png"
                alt=""
              />
            </div>
            <div class="mobile-lg:grid-col-auto">
              <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
            </div>
          </div>
          <div class="usa-footer__contact-links mobile-lg:grid-col-6">
            <div class="usa-footer__social-links grid-row grid-gap-1">
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/facebook.svg"
                    alt="Facebook"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/twitter.svg"
                    alt="Twitter"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/youtube.svg"
                    alt="YouTube"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/instagram.svg"
                    alt="Instagram"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/rss_feed.svg"
                    alt="RSS"
                /></a>
              </div>
            </div>
            <p class="usa-footer__contact-heading">
              &lt;Agency Contact Center&gt;
            </p>
            <address class="usa-footer__address">
              <div class="usa-footer__contact-info grid-row grid-gap">
                <div class="grid-col-auto">
                  <a href="tel:1-800-555-5555">&lt;(800) 555-GOVT&gt;</a>
                </div>
                <div class="grid-col-auto">
                  <a href="mailto:info@agency.gov">&lt;info@agency.gov&gt;</a>
                </div>
              </div>
            </address>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div class="usa-identifier">
    <section
      class="usa-identifier__section usa-identifier__section--masthead"
      aria-label="l: Identificador de la agencia"
    >
      <div class="usa-identifier__container">
        <div class="usa-identifier__logos">
          <a href="javascript:void(0)" class="usa-identifier__logo"
            ><img
              class="usa-identifier__logo-img"
              src="/assets/img/circle-gray-20.svg"
              alt="&lt;Parent agency&gt; logo"
              role="img"
          /></a>
        </div>
        <section
          class="usa-identifier__identity"
          aria-label="Descripción de la agencia"
        >
          <p class="usa-identifier__identity-domain">domain.gov</p>
          <p class="usa-identifier__identity-disclaimer">
            Un sitio web oficial de
            <a href="javascript:void()">&lt;Parent agency&gt;</a>
          </p>
        </section>
      </div>
    </section>
    <nav
      class="usa-identifier__section usa-identifier__section--required-links"
      aria-label="Enlaces importantes"
    >
      <div class="usa-identifier__container">
        <ul class="usa-identifier__required-links-list">
          <li class="usa-identifier__required-links-item">
            <a
              href="javascript:void(0)"
              class="usa-identifier__required-link usa-link"
              >Acerca de &lt;Parent shortname&gt;</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Soporte de accesibilidad</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Solicitud a través de FOIA</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Datos de la ley No FEAR</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Oficina del Inspector General</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Informes de desempeño</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Política de privacidad</a
            >
          </li>
        </ul>
      </div>
    </nav>
    <section
      class="usa-identifier__section usa-identifier__section--usagov"
      aria-label="Información y servicios del Gobierno de EE. UU."
    >
      <div class="usa-identifier__container">
        <div class="usa-identifier__usagov-description">
          ¿Necesita información y servicios del Gobierno?
        </div>
        <a href="https://www.usa.gov/espanol/" class="usa-link"
          >Visite USA.gov en Español</a
        >
      </div>
    </section>
  </div>
</body>

Guidance

When to use the multiple sign-in options template

  • Multiple, legacy authentication systems. If you have more than one authentication system in place and no current ability to consolidate, this template allows you to prioritize one system for account creation while providing multiple options for signing in.

When to consider something else

  • Just one sign-in option. If you can reduce your sign-in options to one authentication system, we recommend avoiding this pattern.

Usability guidance

  • Emphasize one method over others. Indicate a preferred method by giving it more prominence in your design.
  • Focus on the task. Remove extraneous content to minimize distractions.
  • Use consistent, accurate language. Use “sign in” if it’s a verb (like link in a call-to-action or button) or “sign-in” if it’s a noun or adjective form (like “sign-in page”). Don’t use “login” or “log in.”
  • Explain why and how. Let users know the value of accessing their account and explain the purpose of any additional sign-in options.

Components used in this template

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2021-06-16 2.12.0
  • Markup
 No

Added Spanish variant. More information: uswds#4213

2020-12-17 2.10.0
  • Markup
 No

Added authentication templates. More information: uswds#3843