Good Vibrations

Banners

Overview

Banners are included to highlight sale items for e-commerce. Sale Banner 1 and 2 use Bootstrap's card component to help with responsive layouts.

Thin Banner

Thin banner is used on Shop pages to promote sales. The banner requires thin-banner.js for functionality.

                                
<!-- Thin Banner -->
<div id="thin-banner">
    <button type="button" class="btn" aria-label="Close">
        <i data-feather="x" class="stroke-w-1"></i>
    </button>
    <p class="m-0 small">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <a href="#">Click Link</a>.
    </p>
</div>

Sale Banner Large

Sale Banner Large is used to promote sales and can be found on the Shop Home page.

Lorem ipsum

20

%
off

dolor sit amet

                                
<!-- Sale Banner Large -->
<section id="sale-banner-large" class="container my-5 pb-5">
    <div class="card bg-transparent border-0">
        <div class="row g-0 flex-column flex-md-row">
            <div id="left-side"
                class="col-12 col-md-6 d-flex justify-content-center align-items-center bg-brand-x-light-gray gradient-brand-primary-top">
                <div class="d-grid banner-ad-grid py-4">
                    <span class="item-1 text-center text-uppercase text-24 fw-light">Lorem
                        ipsum</span>
                    <div class="item-2">

                        <h2>20</h2>

                    </div>
                    <div class="item-3">

                        <p class="m-0">% <br><span>off</span></p>

                    </div>

                    <span class="item-4 text-center text-uppercase text-24 fw-light">dolor
                        sit amet</span>
                </div>
            </div>
            <div id="right-side"
                class="col-12 col-md-6 d-flex align-items-center justify-content-center position-relative">
                <button type="button"
                    class="button-sale btn btn-brand-primary-reverse btn-xl rounded-pill">Button</button>
            </div>
        </div>
    </div>
</section>

Sale Banner Small

Sale Banner Small is used to promote sales and can be found on the Shop Category pages.

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                                
<!-- Sale Banner Small -->
<div class="row">
    <div class="col mb-5">
        <div class="card mb-3 w-100 rounded-5 overflow-hidden shadow border-0 mb-5">
            <div class="row g-0">
                <div
                    class="col-12 col-md-8 bg-brand-x-light-gray gradient-brand-primary-top">
                    <div class="card-body p-5 text-center">
                        <p class="text-uppercase text-30 fw-bold">Title</p>
                        <p class="text-18 text-brand-mid-gray">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button
                            class="button-sale btn btn-brand-primary-reverse btn-xl rounded-pill">Button</button>
                    </div>
                </div>
                <div class="col-12 col-md-4 sale-banner-small-img">
                </div>
            </div>
        </div>
    </div>
</div>