<div class="modal-wrapper js-modal" id="newsletter-roadblock">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--newsletter-roadblock modal--mobile-overlay">
        <div class="modal__inner">
            <div class="newsletter-roadblock">
                <div class="newsletter-roadblock__header">
                    <img class="newsletter-roadblock__header-image" src="/assets/images/zeal-brand-logo.png">
                </div>
                <div class="newsletter-roadblock__content">
                    <span class="newsletter-roadblock__title">Subscribe to our &#x27;ohana today</span>
                    <span class="newsletter-roadblock__subtitle">Keep up with the latest products and news.</span>
                    <div class="subscribe-form-wrapper subscribe-form-wrapper--newsletter-roadblock js-subscribe-form js-subscribe-form--default">
                        <form class="subscribe-form">
                            <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Email Address" autocomplete="email">
                            <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
    </button>
                        </form>
                        <div class="subscribe-form-status">
                            <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                            <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
                        </div>
                        <span class="subscribe-form-legal">
     <a class="subscribe-form-legal__link" href=""></a>
  </span>
                    </div>

                    <p class="newsletter-roadblock__legal">By clicking subscribe, you agree to receive product news from Maui Jim. You can withdraw consent at any time. For more details see our <a href='#'>Privacy Policy</a>. I certify that I am 13 years or older.</p>
                    <button class="modal__alternate-close js-modal-close-button">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}">
  <div class="modal-overlay js-modal-overlay"></div>
  <div class="modal modal--{{id}} modal--mobile-overlay">
    <div class="modal__inner">
      <div class="newsletter-roadblock">
        <div class="newsletter-roadblock__header">
          <img class="newsletter-roadblock__header-image" src="{{headerImage}}">
        </div>
        <div class="newsletter-roadblock__content">
          <span class="newsletter-roadblock__title">{{title}}</span>
          <span class="newsletter-roadblock__subtitle">{{subtitle}}</span>
          {{render '@subscribe-form' subscribe merge=true}}
          <p class="newsletter-roadblock__legal">{{{legal}}}</p>
          <button class="modal__alternate-close js-modal-close-button">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "newsletter-roadblock",
  "headerImage": "/assets/images/zeal-brand-logo.png",
  "title": "Subscribe to our 'ohana today",
  "subtitle": "Keep up with the latest products and news.",
  "subscribe": {
    "modifier": "newsletter-roadblock",
    "placeholder": "Email Address",
    "legal": null,
    "excludeSubmitIcon": true
  },
  "legal": "By clicking subscribe, you agree to receive product news from Maui Jim. You can withdraw consent at any time. For more details see our <a href='#'>Privacy Policy</a>. I certify that I am 13 years or older."
}
  • Content:
    .modal.modal--newsletter-roadblock {
      .modal__inner {
        max-width: 700px;
        border-radius: 10px;
        overflow: hidden;
      }
    }
    
    .newsletter-roadblock__header {
      height: 60px;
      padding-top: 10px;
      background: url($newsletter-roadblock-header-background) top center;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        height: 70px;
        padding-top: 15px;
      }
    }
    
    .newsletter-roadblock__header-image {
      width: auto;
      height: 40px;
      margin: 0 auto;
    }
    
    .newsletter-roadblock__content {
      max-width: 460px;
      margin: 0 auto;
      padding: 10px;
      text-align: center;
    }
    
    .newsletter-roadblock__title {
      display: block;
      margin: 30px 0 20px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      line-height: 1.9rem;
      text-align: center;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin: 16px 0 30px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin: 18px 0 20px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .newsletter-roadblock__subtitle {
      display: none;
      margin: 20px 0 65px;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        letter-spacing: normal;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 55px;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .subscribe-form-wrapper--newsletter-roadblock {
      .subscribe-form__input,
      .subscribe-form__submit {
        height: 50px;
        float: none;
      }
    
      .subscribe-form__input {
        width: 100%;
      }
    
      .subscribe-form__submit {
        margin-top: 10px;
      }
    
      &.js-subscribe-form--success {
        .subscribe-form,
        .subscribe-form-status__close {
          display: none;
        }
    
        .subscribe-form-status {
          font-size: 2.4rem;
        }
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .subscribe-form__submit {
          width: 100%;
        }
    
        .subscribe-form__submit-label {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .subscribe-form {
          display: block;
        }
    
        .subscribe-form__submit {
          width: auto;
          padding: 0 20px;
          float: left;
        }
      }
    }
    
    .newsletter-roadblock__legal {
      margin: 54px 0 45px;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: normal;
      line-height: 1.7rem;
      text-align: center;
    
      a {
        transition: color $transition-standard;
        color: $color-darkest;
        font-weight: $font-weight-bold;
        text-decoration: none;
    
        &:hover {
          color: $color-primary;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 35px 0 40px;
        letter-spacing: 1px;
        line-height: 2.0rem;
        text-align: left;
      }
    }
    
  • URL: /components/raw/newsletter-roadblock/newsletter-roadblock.scss
  • Filesystem Path: src/components/01-elements/modals/newsletter-roadblock/newsletter-roadblock.scss
  • Size: 2.7 KB

There are no notes for this item.