<header class="checkout-header">
    <div class="checkout-header__inner u-page-width-max-gutters">
        <a class="checkout-header__logo-wrapper" href="#">
      <img class="checkout-header__logo" src="/assets/images/zeal-brand-logo.png" alt="Zeal logo">
    </a>
        <h1 class="checkout-header__title">
            <span class="checkout-header__title-label">Checkout</span>
            <svg class="icon icon--lock">
  <use xlink:href="/assets/icons/icons.svg#lock"></use>
</svg>

            <span class="checkout-header__cart-number">C014550633</span>
        </h1>
    </div>
    <a class="checkout-header__cart-link" href="#checkout-cart">
    <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

  </a>
</header>

<main class="main main--login">
    <div class="l-login-forms u-page-width-max-restricted">
        <div class="l-login-login l-login-form l-login-form--left">
            <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>

        </div>
        <div class=" l-login-form l-login-form--right">
            <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>

        </div>
        <div class=" l-login-form l-login-form--left">
            <div class="assistance-info assistance-info--default">
                <h4 class="assistance-info__title">Need assistance?</h4>
                <ul class="assistance-info__items">
                    <li class="assistance-info__item">
                        <a class="assistance-info__item-value" href="tel:+1800229933">
        <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

        <span class="assistance-info__item-label">888-666-5905</span>
      </a>
                    </li>
                    <li class="assistance-info__item">
                        <a class="assistance-info__item-value" href="mailto:customercare@mauijim.com">
        <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

        <span class="assistance-info__item-label">customercare@mauijim.com</span>
      </a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</main>
<footer class="checkout-footer">
    <div class="u-page-width-max-gutters">
        <ul class="checkout-footer__links">
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Shipping
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Payment
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Warranty
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
            <li class="checkout-footer__links-item">
                <a class="checkout-footer__link" href="#">
          Terms &amp; Conditions
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </li>
        </ul>
        <ul class="checkout-footer__payment-methods">
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--visa" src="/assets/images/payment-method-visa.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--mastercard" src="/assets/images/payment-method-mastercard.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--amex" src="/assets/images/payment-method-amex.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--discover" src="/assets/images/payment-method-discover.png" alt="">
            </li>
            <li class="checkout-footer__payment-method"><img class="payment-method payment-method--verisign" src="/assets/images/payment-method-verisign.png" alt="">
            </li>
        </ul>
    </div>
</footer>
{{render (dynamicComponent header)}}
<main class="main main--login">
  {{#if breadcrumb}}
  {{render '@breadcrumb' breadcrumb}}
  {{/if}}
  {{#if pageTitle}}
  <h2 class="page-title page-title--{{pageTitle.modifier}} u-page-width-max-gutters">{{pageTitle.value}}</h2>
  {{/if}}
  {{#if message}}
  <div class="l-global-messages u-page-width-max-restricted">
    {{render (dynamicComponent message.component) message}}
  </div>
  {{/if}}
  <div class="l-login-forms{{#if breadcrumb}} l-login-forms--breadcrumb{{/if}} u-page-width-max-restricted">
    {{#each formColumns}}
    <div class="{{#if id}}l-login-{{id}}{{/if}} l-login-form l-login-form--{{side}}">
      {{#each items}}
      {{#if form}}
      {{render (dynamicVariant 'login-form' form)}}
      {{/if}}
      {{#if component}}
      {{render (dynamicComponent component)}}
      {{/if}}
      {{/each}}
    </div>
    {{/each}}
  </div>
</main>
{{#if subscribe}}
{{render (dynamicComponent subscribe)}}
{{/if}}
{{render (dynamicComponent footer)}}
{
  "header": "checkout-header--zeal",
  "footer": "checkout-footer",
  "subscribe": null,
  "breadcrumb": null,
  "formColumns": [
    {
      "id": "login",
      "side": "left",
      "items": [
        {
          "form": "login"
        }
      ]
    },
    {
      "side": "right",
      "items": [
        {
          "form": "guest-checkout"
        }
      ]
    },
    {
      "side": "left",
      "items": [
        {
          "component": "assistance-info"
        }
      ]
    }
  ],
  "pageModals": [
    {
      "component": "reset-password"
    }
  ]
}
  • Content:
    .main--login {
      .l-global-messages {
        & ~ .l-login-forms {
          padding-top: 0;
        }
    
        @include breakpoint($breakpoint-md) {
          padding-right: 27px;
          padding-left: 27px;
        }
    
        @include breakpoint($breakpoint-xl) {
          padding-right: 0;
          padding-left: 0;
        }
      }
    }
    
    .l-login-forms {
      padding-top: 32px;
    
      @include breakpoint($breakpoint-sm-only) {
        padding-right: $gutter-width-half;
        padding-left: $gutter-width-half;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        padding-top: 60px;
      }
    }
    
    .l-login-forms--breadcrumb {
      @include breakpoint($breakpoint-md) {
        padding-top: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-top: 20px;
      }
    }
    
    .l-login-form {
      margin-bottom: 60px;
    
      @include breakpoint($breakpoint-md) {
        @include span(5);
        margin-bottom: 60px;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 340px;
        padding: 0;
      }
    }
    
    .l-login-form--left {
      @include breakpoint($breakpoint-md) {
        margin-left: 17px;
        clear: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-left: 0;
      }
    }
    
    .l-login-form--right {
      @include breakpoint($breakpoint-md) {
        margin-right: 17px;
        float: right;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 0;
      }
    }
    
    .l-login-login {
      @include breakpoint($breakpoint-xl) {
        & > .button {
          width: calc(50% - 10px);
          padding: 0;
        }
      }
    }
    
  • URL: /components/raw/login-page/login-page.scss
  • Filesystem Path: src/components/03-pages/login-page/login-page.scss
  • Size: 1.4 KB

There are no notes for this item.