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.

<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  






<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="/assets/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">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <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">
      <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-title banner-lock-description" focusable="false"><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>
) 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>


  

<header class="usa-header usa-header--extended"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </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">A tagline that explains the benefit of creating an account.</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 Legacy system 1</a></p>
            <p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Legacy system 2</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">A tagline that explains the benefit of creating an account.</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.</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="Alt text">
          <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="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 2:</strong> Ut ac dictum elit. Vivamus nec velit sed leo 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="Alt text">
          <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 [other secondary user], please use [secondary Single Sign On (SSO)].</p>
    <p><a class="usa-button usa-button--outline" href="javascript:void()">Launch secondary SSO</a></p>
  </div>
</div>
      </div>
    </section>
  </div>
</main>

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