600 West

Optin 

<aside class="Optin fixed bottom0 left0 right0 pa400 bg--background-dark c--text-inverse js-optin">
    <div class="mw900 mx-auto flex items-center justify-center">
        <p class="mx500">Sign up to have social media resources sent to your inbox every week.</p>

        <button class="button _primary mt0 mx500 js-optinclose" aria-controls="optin-lightbox">Sign Me Up</button>

        <button type="button" class="button-reset flex js-optinclose" aria-label="Close this pop-up">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><path d="M20 2.1L17.9 0 10 7.9 2.1 0 0 2.1 7.9 10 0 17.9 2.1 20l7.9-7.9 7.9 7.9 2.1-2.1-7.9-7.9"/></g></svg>
        </button>
    </div>
</aside>
 
<aside class="Optin fixed bottom0 left0 right0 pa400 bg--background-dark c--text-inverse js-optin">
    <div class="mw900 mx-auto flex items-center justify-center">
        <p class="mx500">Sign up to have social media resources sent to your inbox every week.</p>

        <button class="button _primary mt0 mx500 js-optinclose" aria-controls="optin-lightbox">Sign Me Up</button>

        <button type="button" class="button-reset flex js-optinclose" aria-label="Close this pop-up">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><path d="M20 2.1L17.9 0 10 7.9 2.1 0 0 2.1 7.9 10 0 17.9 2.1 20l7.9-7.9 7.9 7.9 2.1-2.1-7.9-7.9"/></g></svg>
        </button>
    </div>
</aside>
 
/* No context defined for this component. */
  • Content: 
    .Optin {
    transition: transform $transition-time-500 $transition-out-default;
    transform: translateY(100%);
}
.Optin.is-open {
    transition-timing-function: $transition-in-default;
    transform: translateY(0);
}
  • URL: /components/raw/optin/Optin.scss
  • Filesystem Path: components/organisms/Optin/Optin.scss
  • Size: 221 Bytes

There are no notes for this item.