18F/web-design-standards

{% set requiredLabel %}
  <abbr title="required" class="usa-label--required">*</abbr>
{% endset %}

<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">
            {{ tagline |e }}
          </h1>
          <div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
            <h1 class="margin-bottom-0">{{ form.title }}</h1>
            <form class="usa-form">
              <fieldset class="usa-fieldset">
                <legend class="usa-legend margin-top-1">{{ form.legend }}</legend>
                <p>
                  {{ form.hint | trim | raw }}
                </p>
                <label class="usa-label" for="email">
                  {{ form.email.label }}
                  {{ requiredLabel | trim | raw }}
                </label>
                <input class="usa-input" id="email" name="email" type="email" autocapitalize="off" autocorrect="off" required>
                <label class="usa-label" for="password-create-account">
                  {{ form.password.label }}
                </label>
                <input class="usa-input" id="password-create-account" name="password" type="password" required>

                {% include "@components/_usa-password/src/usa-password.twig" with { 'toggle': form.password.toggle } %}

                <label class="usa-label" for="password-create-account-confirm">
                  {{ form.password.confirmation.label }}
                  {{ requiredLabel | trim | raw }}
                </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">
                    {{ form.terms.label | trim | raw }}
                    {{ requiredLabel | trim | raw }}
                  </label>
                </div>

                <input class="usa-button" type="submit" value="{{ form.submit }}">
              </fieldset>
            </form>
          </div>
          <p class="text-center desktop:text-left">
            {{ existing_user.label }}
            <a class="usa-link" href="{{ placeholder_link }}">
              {{- existing_user.cta -}}
            </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">
            {% include "@templates/usa-sign-in/includes/_value-props.twig" %}
            {% include "@templates/usa-sign-in/includes/_max.twig" %}
          </div>
        </div>
      </div>
    </section>
  </div>
</main>