<form class="login-form login-form--guest-checkout">
    <h4 class="login-form__title">Guest Checkout</h4>
    <p class="login-form__description">You’ll have a chance to create an account once you’ve completed checking out.</p>
    <div class="login-form__form-items">
        <div class="form-item form-item--email form-item--guest-checkout-email form-item--required">
            <label for="guest-checkout-email" class="label label--email label--required">Email Address</label>
            <input type="email" id="guest-checkout-email" name="email" class="input input--email" placeholder="name@example.com" autocomplete="email">
        </div>

    </div>
    <div class="login-form__actions">
        <button class="button button--primary">Continue as a guest</button>

    </div>
</form>
<form class="login-form login-form--{{_self.name}}">
  <h4 class="login-form__title">{{title}}</h4>
  <p class="login-form__description">{{description}}</p>
  {{#if formItems}}
  <div class="login-form__form-items">
    {{#each formItems}}
    {{render (dynamicComponent component) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
  {{#if actions}}
  <div class="login-form__actions">
    {{#each actions}}
    {{render (dynamicVariant 'buttons' type) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
</form>
{
  "title": "Guest Checkout",
  "description": "You’ll have a chance to create an account once you’ve completed checking out.",
  "formItems": [
    {
      "component": "input--email",
      "type": "email",
      "id": "guest-checkout-email",
      "name": "email",
      "label": "Email Address",
      "placeholder": "name@example.com"
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Continue as a guest"
    }
  ]
}
  • Content:
    .login-form__title {
      margin: 0 0 13px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: calc(100% + 15px);
        margin-bottom: 11px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .login-form__description {
      margin: 13px 0 20px;
      color: $color-dark;
      font-size: 1.4rem;
      letter-spacing: normal;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-md) {
        margin: 10px 0 20px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    
      .login-form--login &,
      .login-form--create-account & {
        @include breakpoint($breakpoint-lg) {
          min-height: 34px;
        }
    
        @include breakpoint($breakpoint-xl) {
          min-height: 46px;
        }
      }
    }
    
    .login-form__form-items {
      .label {
        margin-bottom: 7px;
      }
    
      .form-item {
        margin-bottom: 10px;
      }
    
      .input {
        padding: 10px 20px;
      }
    
      @include breakpoint($breakpoint-xl) {
        .form-item {
          margin-bottom: 13px;
        }
      }
    }
    
    .login-form__actions {
      margin-top: 20px;
    
      @include breakpoint($breakpoint-sm-only) {
        .button {
          display: block;
          margin: 0 auto 8px;
        }
    
        .button--plain-text {
          width: auto;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .button {
          width: 100%;
        }
    
        .button:not(:first-child) {
          margin-left: 10px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .button {
          width: auto;
        }
      }
    }
    
  • URL: /components/raw/login-form/login-form.scss
  • Filesystem Path: src/components/01-elements/forms/login-form/login-form.scss
  • Size: 1.6 KB

There are no notes for this item.