Badge

The new AHA Shipping banner with modal popup, when click on details button popup will display with full content and its fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.

Information Badge

2020 AHA Guidelines for CPR & ECC are here!New Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available now New Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available nowNew Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available now.

HTML

<div class="aui-noticebanner"> 
    <div class="aui-bg-clr">
            <div class="aui-badg-con d-flex justify-content-between align-items-center px-sm-4 py-sm-3 px-lg-6 py-lg-4">
                <p class="aui-badge-elips mb-0 aui-flexbs-90">
                    <a href="" aria-label="" data-toggle="modal" data-target="#aui-noticebanner">
                        <strong class="pr-1">2020 AHA Guidelines for CPR & ECC are here!</strong> 
                        New Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available now New Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available nowNew Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available now.
                    </a>
                </p>
                // <button type="button" aria-label="Close" class="d-flex aui-sm-cross badg-x-but font-weight-bold">x</button>
                <div class="aui-badg-readmore justify-content-between d-flex ml-3">
                    <button data-toggle="modal" data-target="#aui-noticebanner" class="aui-readmorebut mx-4" type="button" aria-label="Read more">Read more</button>
                    <button type="button" aria-label="Close" class="d-flex aui-readmoreclose aui-sm-cross badg-x-but font-weight-bold">x</button>
                </div>
            </div>
        </div>
        <div class="modal fade show" id="aui-noticebanner" tabIndex="-1" aria-labelledby="Modal" aria-modal="true" role="dialog">
            <div class="modal-dialog modal-lg aha-card-modal" >
                <div class="modal-content">
                    <div class="modal-body p-4">
                        <div class="aui-notice-popup d-flex mb-3">
                            <h3>Alert</h3>
                            <button type="button" class="close aha-modal-close" data-dismiss="modal" aria-label="Close">x</button>
                        </div>
                        <p>
                            <strong class="pr-1">2020 AHA Guidelines for CPR & ECC are here!</strong> 
                            New Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available now New Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available nowNew Guidelines resources and BLS, ACLS, and PALS products reflecting the updated science are available now.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Shipping Badge

INTERNATIONAL Free Shipping on Orders of $100 or more

Details

HTML

 <div class="aui-sm-noticebanner"> 
    <div class="aui-sm-notbancont d-flex align-items-center justify-content-center">
        <p tabindex="0" class="m-0">INTERNATIONAL <b>Free Shipping</b> on Orders of <span>$100</span> or more</p>
        <a class="ml-4 font-500" href="#" data-toggle="modal" data-target="#aui-sm-noticebanner">Details</a>
    </div>
    <div class="modal fade" id="aui-sm-noticebanner" tabIndex="-1" aria-labelledby="Modal" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg aha-card-modal" >
            <div class="modal-content">
                <div class="modal-body p-4">
                    <div class="aui-notice-popup d-flex mb-3">
                        <h3 class="font-400">Free Shipping</h3>
                        <button type="button" class="close aha-modal-close" data-dismiss="modal" aria-label="Close"><i class="aha-icon-cross"></i></button>
                    </div>
                    <p>
                    INTERNATIONAL Free ground shipping is valid on orders of $100 or more after promotions and discounts are applied, through June 30,2020. Taxes and prior purchase do not qualify toward the minimum purchase requirement. Assessorial Fees may apply. Offer is subject to change without notice.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>