<div class="subscribe">
    <div class="u-page-width-max">
        <div class="subscribe__text">
            <h5 class="subscribe__header">Subscribe to our &#x27;ohana</h5>
            <span class="subscribe__description">Keep up with the Latest Products and News.</span>
        </div>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </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">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
        </div>

    </div>
</div>
<div class="subscribe">
  <div class="u-page-width-max">
    <div class="subscribe__text">
      <h5 class="subscribe__header">{{header}}</h5>
      <span class="subscribe__description">{{description}}</span>
    </div>
    {{render '@subscribe-form'}}
  </div>
</div>
{
  "header": "Subscribe to our 'ohana",
  "description": "Keep up with the Latest Products and News."
}
  • Content:
    .subscribe {
      padding: 10px;
      background-color: $subscribe-background-color;
    
      .subscribe-form__input {
        border-right: 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        @include clearfix;
        padding: 25px 95px;
    
        // @todo Move these styles to a designated container of their own inside
        // this one.
        .u-page-width-max {
          display: flex;
          align-content: stretch;
          align-items: flex-start;
          justify-content: center;
        }
    
        .subscribe-form-wrapper {
          flex-grow: 2;
          max-width: 600px;
        }
      }
    
      @media print {
        display: none;
      }
    }
    
    .subscribe__text {
      @include breakpoint($breakpoint-md-only) {
        padding-top: 0;
        line-height: 50px;
      }
    
      @include breakpoint($breakpoint-xl) {
        flex-grow: 0;
        margin-right: 25px;
      }
    
      @include breakpoint($page-width-max) {
        padding-top: 5px;
      }
    }
    
    .subscribe__header {
      margin: 0 0 5px;
      color: $color-darkest;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 0;
        line-height: 50px;
      }
    
      @include breakpoint($page-width-max) {
        line-height: 2.0rem;
      }
    }
    
    .subscribe__description {
      display: none;
    
      @include breakpoint($page-width-max) {
        display: block;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
  • URL: /components/raw/subscribe/subscribe.scss
  • Filesystem Path: src/components/02-components/subscribe/subscribe.scss
  • Size: 1.3 KB

See the notes in the Subscribe Form element.