PDJ Brandbox

unsubscribe 

<div class="unsubscribe">
    <div class="section-header section-header--centered">
        <div class="section-header__inner section--9">
            <h1 class="section-header__heading heading heading--1">Unsubscribe</h1>
        </div>
    </div>

    <div class="unsubscribe__inner">
        <div class="unsubscribe__content">
            <div class="unsubscribe__description">
                We’re sorry to see you go!<br>
                Enter your email address to unsubsribe from the list.
            </div>

            <form class="unsubscribe__form">
                <div class="unsubscribe__input">
                    <div class="input-field is-required">
                        <div class="input-field__inner">
                            <input type="" name="name" id="" value="john.doe@gmail.com" required>
                            <span class="input-field__placeholder">Your email</span>
                        </div>
                        <div class="input-field__error">
                            <p>This field is not filled in correctly or cannot be empty.</p>
                        </div>
                    </div>

                </div>

                <div class="unsubscribe__submit">
                    <div class="actions actions--center actions--force">
                        <div class="actions__item">

                            <button type="submit" class="action action--normal action--on-light">
                                <span class="action__label">Unsubscribe</span>
                                <span class="action__bg"></span>
                            </button>

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
 
<div class="unsubscribe">
  {{render '@section-header' heading }}

  <div class="unsubscribe__inner">
    <div class="unsubscribe__content">
      <div class="unsubscribe__description">
        We’re sorry to see you go!<br>
        Enter your email address to unsubsribe from the list.
      </div>

      <form class="unsubscribe__form">
        <div class="unsubscribe__input">
          {{render '@input-field' input}}
        </div>

        <div class="unsubscribe__submit">
          <div class="actions actions--center actions--force">
            <div class="actions__item">
              {{render '@action' action}}
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
 
back-link: false
heading:
  heading: Unsubscribe
  type: 1
  size: 1
  section: 9
  modifier: centered
input:
  placeholder: Your email
  name: name
  value: john.doe@gmail.com
  required: true
  disabled: false
action:
  type: normal
  tint: on-light
  buttonType: submit
  label: Unsubscribe
  • Content: 
    .unsubscribe {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: calc(var(--gap) * 8) 0;
}

.unsubscribe__inner {
  margin-top: calc(var(--gap) * 2);
  padding: 0 var(--gutter--bucket);

  @media (min-width: 750px) {
    margin-top: calc(var(--gap) * 4);
  }
}

.unsubscribe__content {
  max-width: var(--section--3);
  margin: 0 auto;
}

.unsubscribe__description {
  text-align: center;
  margin-top: calc(var(--gap) * 6);

  &:first-child {
    margin-top: 0;
  }
}

.unsubscribe__form {
  margin-top: calc(var(--gap) * 3);

  @media (min-width: 750px) {
    margin-top: calc(var(--gap) * 5);
  }
}

.unsubscribe__submit {
  margin-top: calc(var(--gap) * 2);

  @media (min-width: 750px) {
    margin-top: calc(var(--gap) * 6);
  }
}

.unsubscribe__social {
  margin-top: calc(var(--gap) * 3);
}
  • URL: /components/raw/unsubscribe/unsubscribe.scss
  • Filesystem Path: ../src/05_buckets/unsubscribe/unsubscribe.scss
  • Size: 898 Bytes

No notes defined.