<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. */
.Optin {
transition: transform $transition-time-500 $transition-out-default;
transform: translateY(100%);
}
.Optin.is-open {
transition-timing-function: $transition-in-default;
transform: translateY(0);
}
There are no notes for this item.