Templates

Create account

Explain the benefits of setting up an account.

About the create account template

Site users will be more likely to create an account if it’s easy and they understand the benefits. Keep the account creation process simple with a single “create account” button and limited distractions (like other calls-to-action). Succinctly outline the benefits of setting up an account, emphasizing what they can do and how it can help them.

Create account

Create account

Create account (Spanish)

Create account Demo Create account Demo Create account (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 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-4"
          >
            <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-0">Create account</h1>
              <form class="usa-form">
                <fieldset class="usa-fieldset">
                  <legend class="usa-legend margin-top-1">
                    Get started with an account.
                  </legend>
                  <p>
                    <abbr title="required" class="usa-hint usa-hint--required"
                      >*</abbr
                    >
                    indicates a required field.
                  </p>
                  <label class="usa-label" for="email"
                    >Email address
                    <abbr title="required" class="usa-label--required"
                      >*</abbr
                    ></label
                  >
                  <input
                    class="usa-input"
                    id="email"
                    name="email"
                    type="email"
                    autocapitalize="off"
                    autocorrect="off"
                    required
                  />
                  <label class="usa-label" for="password-create-account"
                    >Create password</label
                  >
                  <input
                    class="usa-input"
                    id="password-create-account"
                    name="password"
                    type="password"
                    required
                  />
                  <button
                    title=""
                    type="button"
                    class="usa-show-password"
                    aria-controls="password-create-account password-create-account-confirm"
                    data-show-text="Show password"
                    data-hide-text="Hide password"
                  >
                    Show password
                  </button>
                  <label class="usa-label" for="password-create-account-confirm"
                    >Re-type password
                    <abbr title="required" class="usa-label--required"
                      >*</abbr
                    ></label
                  >
                  <input
                    class="usa-input"
                    id="password-create-account-confirm"
                    name="password-confirm"
                    type="password"
                    required
                  />
                  <div class="usa-checkbox margin-y-3">
                    <input
                      class="usa-checkbox__input"
                      id="terms-and-conditions"
                      type="checkbox"
                      name="terms-and-conditions"
                      value="terms"
                      required
                    />
                    <label
                      class="usa-checkbox__label"
                      for="terms-and-conditions"
                      >I agree to the
                      <a href="javascript:void();">terms and conditions</a>.
                      <abbr title="required" class="usa-label--required"
                        >*</abbr
                      ></label
                    >
                  </div>
                  <input
                    class="usa-button"
                    type="submit"
                    value="Create account"
                  />
                </fieldset>
              </form>
            </div>
            <p class="text-center desktop:text-left">
              Already have an account? <a class="usa-link" href="">Sign in</a>.
            </p>
          </div>
          <div
            class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205"
          >
            <div
              class="border-top border-base-lighter padding-top-4 desktop:border-0 desktop:padding-top-0"
            >
              <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>
        </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="">&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 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-4"
          >
            <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-0">Cree una cuenta</h1>
              <form class="usa-form">
                <fieldset class="usa-fieldset">
                  <legend class="usa-legend margin-top-1">
                    Comience con su cuenta.
                  </legend>
                  <p>
                    <abbr title="required" class="usa-hint usa-hint--required"
                      >*</abbr
                    >
                    indica un campo obligatorio.
                  </p>
                  <label class="usa-label" for="email"
                    >Su email
                    <abbr title="required" class="usa-label--required"
                      >*</abbr
                    ></label
                  >
                  <input
                    class="usa-input"
                    id="email"
                    name="email"
                    type="email"
                    autocapitalize="off"
                    autocorrect="off"
                    required
                  />
                  <label class="usa-label" for="password-create-account"
                    >Cree una contraseña</label
                  >
                  <input
                    class="usa-input"
                    id="password-create-account"
                    name="password"
                    type="password"
                    required
                  />
                  <button
                    title=""
                    type="button"
                    class="usa-show-password"
                    aria-controls="password-create-account password-create-account-confirm"
                    data-show-text="Muestre la contraseña"
                    data-hide-text="Esconda la contraseña"
                  >
                    Muestre la contraseña
                  </button>
                  <label class="usa-label" for="password-create-account-confirm"
                    >Reescriba la contraseña
                    <abbr title="required" class="usa-label--required"
                      >*</abbr
                    ></label
                  >
                  <input
                    class="usa-input"
                    id="password-create-account-confirm"
                    name="password-confirm"
                    type="password"
                    required
                  />
                  <div class="usa-checkbox margin-y-3">
                    <input
                      class="usa-checkbox__input"
                      id="terms-and-conditions"
                      type="checkbox"
                      name="terms-and-conditions"
                      value="terms"
                      required
                    />
                    <label
                      class="usa-checkbox__label"
                      for="terms-and-conditions"
                      >Estoy de acuerdo con los
                      <a href="javascript:void();"
                        >términos y condiciones de uso</a
                      >.
                      <abbr title="required" class="usa-label--required"
                        >*</abbr
                      ></label
                    >
                  </div>
                  <input
                    class="usa-button"
                    type="submit"
                    value="Cree su cuenta"
                  />
                </fieldset>
              </form>
            </div>
            <p class="text-center desktop:text-left">
              ¿Ya tiene una cuenta?
              <a class="usa-link" href="">Ingrese a su cuenta</a>.
            </p>
          </div>
          <div
            class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205"
          >
            <div
              class="border-top border-base-lighter padding-top-4 desktop:border-0 desktop:padding-top-0"
            >
              <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>
        </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="">&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 create account template

  • Users can create an account directly on your website. This template is intended for agencies who have a self-hosted authentication system and need a design that’s simple, usable, and mobile-friendly.

When to consider something else

  • Your agency uses a third-party authentication system. If you’re leveraging a shared service, follow the user experience guidelines from that service. For example, login.gov recommends placing a “sign in” link in the header of your website that takes users through the entire “sign in” or “create an account” experience on the login.gov site.

Usability guidance

  • Help users focus on the task. Remove extraneous content. A “create account” page works best when it’s simple, focused, and to-the-point.
  • Use specific field labels. If you’re asking for a username, say username. If it’s an email, say email address. Don’t make the user guess which one you mean.
  • Keep the form short. Only ask for what’s necessary to create an account. Eliminate optional fields whenever possible, and keep the information pertinent to the account creation process (like username, email, password, and security questions). If you need to ask for something outside this common account creation information, explain why it’s needed.
  • Convey clear password requirements. Clearly indicate any password requirements. If possible, validate these requirements as users type, and use a password meter to show password strength.
  • Allow users to toggle password visibility. This helps ensure users are entering passwords correctly while maintaining privacy when needed.
  • Enable copy and paste. Many users rely on password generators because they provide secure passwords and phrases they don’t have to memorize. Forcing manual entry is a barrier to usability and can cause mistakes.
  • Use consistent, accurate language. Use the phrase “create account” instead of “sign up,” which can be more easily confused with “sign in.” It’s also more accurate, since users aren’t necessarily “signing up” for anything when accessing a government site or service.
  • Allow users to switch between creating an account and signing in. Users should be able to easily find where to sign in from the create account page, and vice versa. This also applies to the global header of the site, where users should have direct access to either the sign-in or create an account page.
  • Include required legal agreements. Work with your agency’s information security officer and general counsel to determine how to handle legal copy placement regarding terms and conditions. Use a checkbox to affirm that your users accept terms and conditions. Make the terms and conditions easy to find without distracting from the primary purpose of creating an account.

Components used in this template

Additional information

  • NIST Special Publication 800-63-3, Digital Identity Guidelines, provides technical requirements for federal agencies implementing digital identity services. The guidelines cover identity proofing and authentication of users (such as employees, contractors, or private individuals) interacting with government IT systems over open networks.

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