<form class="login-form login-form--login">
    <h4 class="login-form__title">Login</h4>
    <p class="login-form__description">If you are a returning user, please enter your email and password.</p>
    <div class="login-form__form-items">
        <div class="form-item form-item--email form-item--login-email form-item--required">
            <label for="login-email" class="label label--email label--required">Email Address</label>
            <input type="email" id="login-email" name="email" class="input input--email" placeholder="name@example.com" autocomplete="email">
        </div>

        <div class="form-item form-item--password form-item--login-password form-item--required">
            <label for="login-password" class="label label--password label--required">Password</label>
            <input type="password" id="login-password" name="password" class="input input--password" autocomplete="current-password">
        </div>

    </div>
    <div class="login-form__actions">
        <button class="button button--primary">Login</button>

        <button class="button button--plain-text js-button-disabled js-modal-open-link" data-modal-id="reset-password" formnovalidate>Forgot password?</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": "Login",
  "description": "If you are a returning user, please enter your email and password.",
  "formItems": [
    {
      "component": "input--email",
      "type": "email",
      "id": "login-email",
      "name": "email",
      "label": "Email Address",
      "placeholder": "name@example.com"
    },
    {
      "component": "input--password",
      "type": "password",
      "id": "login-password",
      "name": "password",
      "label": "Password"
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Login"
    },
    {
      "type": "plain-text",
      "buttonValue": "Forgot password?",
      "buttonModal": "reset-password",
      "disabled": true,
      "noValidate": true
    }
  ],
  "pageModals": [
    {
      "component": "reset-password"
    }
  ]
}
  • 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.