BFNA Design System

Subscribe: Alt 

<div class="subscribe subscribe--alt">
    <div class="subscribe__form">
        <span>Subscribe for updates</span>
        <a href="#" class="button button--primary button--navy">Register</a>
    </div>
</div>
 
<div class="subscribe subscribe--alt">
  <div class="subscribe__form">
    <span>Subscribe for updates</span>
    <a href="#" class="button button--primary button--navy">Register</a>
  </div>  
</div>
 
/* No context defined for this component. */
  • Content: 
    const emailSubscription = document.getElementById('subscribe-form-email');

if(emailSubscription){
    emailSubscription.oninput = event => {
        const submitButton = document.getElementById('subscribe-submit-button');
        
        if (emailSubscription.checkValidity() && event.target.value.length > 0) {
            submitButton.classList.remove('disabled');
    
        } else {
            submitButton.classList.add('disabled');
        }
    };
}
  • URL: /components/raw/subscribe/subscribe.js
  • Filesystem Path: src/components/04-modules/subscribe/subscribe.js
  • Size: 462 Bytes
  • Content: 
    // // Structure
.subscribe {
  padding: 2.5rem;

  &__form {
    display: flex;
    margin: auto;
  }

  // &__button { padding: 0.5rem 1rem; }
}

.subscribe__form {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  // max-width: 40%;

  > span { flex: 1; }
  > a { flex: 0; }
}

// // Visuals
.subscribe {
  background-color: var(--color-yellow);

  span { 
    font-weight: 600; 
    display: inline-block;
    align-self: center;
    text-align: right;
    padding-right: 2rem;
  }
}

//   input.subscribe__email {
//     color: var(--color-white);
//     border: none;
//     background-color: var(--color-yellow);
//     font-weight: bold;
//     text-align: left;
//     letter-spacing: 0.39px;
//     outline: none;
//     font-size: 1.2rem;
//     width: 50vw;
//     max-width: 480px;

//     &::placeholder {
//       color: var(--color-white);
//       font-weight: bold;
//       opacity: 1;
//     }

//     &:-webkit-autofill {
//       -webkit-box-shadow:0 0 0 50px var(--color-yellow) inset;
//       -webkit-text-fill-color:  var(--color-white);
//     }

//     &:-webkit-autofill:focus {
//       -webkit-box-shadow: 0 0 0 50px var(--color-yellow) inset;
//       -webkit-text-fill-color:  var(--color-white);
//     }


//   &__button {
//     background-color: transparent;
//     color: var(--color-white);
//     text-transform: uppercase;
//     font-weight: bold;
//     border: none;
//     cursor: pointer;
//     outline: none;
//     font-size: 1.2rem;

//     &.disabled {
//       opacity: 0.4;
//     }
//   }
// }

// .subscribe__form {
//   // border-bottom: 2px solid var(--color-white);
// }
  • URL: /components/raw/subscribe/subscribe.scss
  • Filesystem Path: src/components/04-modules/subscribe/subscribe.scss
  • Size: 1.6 KB

There are no notes for this item.