Promotional Ribbon
The promotional ribbon is used to drive end users to donate. It will be part of a Google Optimize A/B test
Requires:
dist/js/slick-carousel/vendors/slick.min.jsdist/js/promo-ribbon.bundle.js
Make your GivingTuesday gift today to help a family build a home and a future!
Give Now{{ attach_library('h4h_theme/promo-ribbon') }}
{{ attach_library('h4h_theme/optimize-ribbon-test') }}
<div class="ribbon-cta">
<div class="ribbon-cta__content-container">
<p class="ribbon-cta__content">Make your <strong>GivingTuesday</strong> gift today to help a family build a home and a future!</p>
<a href="https://secure.habitat.org/site/Donation2?df_id=4973&keyword=ribbon-homepage" class="ribbon-cta__donate-btn btn btn--secondary">Give Now</a>
</div>
<div class="ribbon-cta__close-container">
<button title="Close" type="button" class="ribbon_cta__close">
<svg xmlns="http://www.w3.org/2000/svg" class="ribbon_cta__icon" width="24" height="24" viewBox="0 0 17.5 17.5">
<title>Close</title>
<path d="M12.82,11.09a.69.69,0,0,0-.21-.5l-2-2,2-2a.69.69,0,0,0,.21-.5.7.7,0,0,0-.21-.51l-1-1a.7.7,0,0,0-.51-.21.69.69,0,0,0-.5.21l-2,2-2-2a.69.69,0,0,0-.5-.21.7.7,0,0,0-.51.21l-1,1a.7.7,0,0,0-.21.51.69.69,0,0,0,.21.5l2,2-2,2a.69.69,0,0,0-.21.5.7.7,0,0,0,.21.51l1,1a.7.7,0,0,0,.51.21.69.69,0,0,0,.5-.21l2-2,2,2a.69.69,0,0,0,.5.21.7.7,0,0,0,.51-.21l1-1a.7.7,0,0,0,.21-.51Zm4.32-2.52A8.38,8.38,0,0,1,16,12.87,8.55,8.55,0,0,1,12.87,16a8.37,8.37,0,0,1-4.3,1.15A8.39,8.39,0,0,1,4.27,16a8.53,8.53,0,0,1-3.12-3.12A8.39,8.39,0,0,1,0,8.57a8.39,8.39,0,0,1,1.15-4.3A8.53,8.53,0,0,1,4.27,1.15,8.39,8.39,0,0,1,8.57,0a8.37,8.37,0,0,1,4.3,1.15A8.55,8.55,0,0,1,16,4.27a8.37,8.37,0,0,1,1.15,4.3Z"></path>
</svg>
</button>
</div>
</div>