Loading...

CMS Components Guide

Basic Page Configuration

Hero block

cbd_is_everywhere
cbd-swap_hero-module-1_state-1-3
cbd-swap_hero-module-1-text-state-2-06
cbd-swap_hero-module-1_state-2
cbd-swap_hero-module-1-text-state-3-03
cbd-swap_hero-module-1_state-1-3

Scroll for free CBD

        
        
<div class="c-hero" style="background: url({{view url='images/background_pattern.png'}}) left top repeat;">
    <div class="c-hero__bg-image-1"></div>
    <div class="c-hero__bg-image-2"></div>
    <div class="c-hero__content-box">
        <div class="c-hero__content lax" id="c-hero-content-1"
        data-lax-opacity="0 1, (-elh*0.85) 1, (-elh) 0"
        data-lax-anchor="self">
            <div class="c-hero__text-image lax" data-aos="fade-right"
            data-lax-translate-x_large="0 0, (-elh*0.5) -100"
            data-lax-translate-x_small="0 0, (-elh*0.5) -30"
            data-lax-anchor="self">
                <img src="{{media url=cbd-swap/hero-block/cbd_is_everywhere.svg}}" alt="cbd_is_everywhere">
            </div>
            <div class="c-hero__image lax" data-aos="fade-left"
            data-lax-translate-x_large="0 0, (-elh*0.5) 100"
            data-lax-translate-x_small="0 0, (-elh*0.5) 30"
            data-lax-anchor="self">
                <img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1_state-1-3.jpg}}" alt="cbd-swap_hero-module-1_state-1-3">
            </div>
        </div>

        <div class="c-hero__content c-hero__content--full-width lax" id="c-hero-content-2"
        data-lax-opacity="0 0, (-elh) 0, (-elh*1.25) 1, (-elh*1.85) 1, (-elh*2) 0"
        data-lax-anchor="#c-hero-content-1">
            <div class="c-hero__text-image lax"
            data-lax-translate-y_large="(-elh) 50, (-elh*1.5) 0"
            data-lax-translate-y_small="(-elh) 20, (-elh*1.5) 0"
            data-lax-anchor="#c-hero-content-1">
                <img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1-text-state-2-06.svg}}" alt="cbd-swap_hero-module-1-text-state-2-06">
            </div>
            <div class="c-hero__image">
                <img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1_state-2.jpg}}" alt="cbd-swap_hero-module-1_state-2">
            </div>
        </div>

        <div class="c-hero__content lax" id="c-hero-content-3"
        data-lax-opacity="0 0, (-elh) 0, (-elh*1.25) 1, (-elh*1.85) 1, (-elh*2) 0"
        data-lax-anchor="#c-hero-content-2">
            <div class="c-hero__text-image lax"
            data-lax-translate-x_large="(-elh) 0, (-elh*1.5) -100"
            data-lax-translate-x_small="(-elh) 0, (-elh*1.5) -30"
            data-lax-anchor="#c-hero-content-2">
                <img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1-text-state-3-03.svg}}" alt="cbd-swap_hero-module-1-text-state-3-03">
            </div>
            <div class="c-hero__image lax"
            data-lax-translate-x_large="(-elh) 0, (-elh*1.5) 100"
            data-lax-translate-x_small="(-elh) 0, (-elh*1.5) 30"
            data-lax-anchor="#c-hero-content-2">
                <img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1_state-1-3.jpg}}" alt="cbd-swap_hero-module-1_state-1-3">
            </div>
        </div>

        <div class="c-hero__subtitle lax" data-aos="fade-top"
        data-lax-opacity="0 1, (-elh*1.5) 1, (-elh*1.85) 0"
        data-lax-anchor="#c-hero-content-2">
            <h3>Scroll for free CBD</h3>
        </div>
    </div>
</div>

Animated content block

  • class="c-animated-content" @brand-white
  • class="c-animated-content c-component--light-bg" @olive-oil
What is inside the bottle?What is inside the bottle?
Hand with oilHand with oil
High quality?High quality?
Hands swapHands swap
Swap it for freeSwap it for free
Hands swap
  • Non GMONon-GMO
  • US grownUS GROWN HEMP
  • No harshNo Harsh Chemical Pesticides
  • Gluten freeGluten Free
Hands swap
Leaf
Leaf

        
        
<section class="c-animated-content" style="background: url({{view url='images/background_pattern.png'}}) left top repeat;">
    <div class="c-animated-content__content-box text-align-right">
        <div class="c-animated-content__bg-image-1"></div>
        <div class="c-animated-content__container">
            <div class="c-animated-content__content lax"
            data-lax-translate-y_small="(vh) 200, (-elh) -50 | speed=3 offset=-500"
            data-lax-translate-y_large="(vh) 400, (-elh) 0 | speed=2 offset=-500"
            data-lax-anchor="self">
                <img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/whats_insideX2.png}}"
                alt="What is inside the bottle?">
                <img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/whats_insideX1.png}}"
                alt="What is inside the bottle?">
            </div>
            <div class="c-animated-content__image lax"
            data-lax-translate-x="(vh) -400, (-elh) 0 | speed=2 offset=-500"
            data-lax-anchor="self">
                <img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/[email protected]}}"
                alt="Hand with oil">
                <img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/[email protected]}}"
                alt="Hand with oil">
            </div>
        </div>
    </div>
    <div class="c-animated-content__content-box text-align-left">
        <div class="c-animated-content__bg-image-2"></div>
        <div class="c-animated-content__container">
            <div class="c-animated-content__content lax"
            data-lax-translate-y_small="(vh) 200, (-elh) 0 | speed=2 offset=-500"
            data-lax-translate-y_large="(vh) 400, (-elh) 50 | speed=2 offset=-500"
            data-lax-anchor="self">
                <img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/high_qualityX2.svg}}"
                alt="High quality?">
                <img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/high_qualityX1.svg}}"
                alt="High quality?">
            </div>

            <div class="c-animated-content__image lax"
            data-lax-translate-x="(vh) 400, (-elh) 0 | speed=2 offset=-500"
            data-lax-anchor="self">
                <img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/hands_swap_bwX1.png}}"
                alt="Hands swap">
                <img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/hands_swap_bwX2.png}}"
                alt="Hands swap">
            </div>
        </div>
    </div>
    <div class="c-animated-content__content-box text-align-center">
        <div class="c-animated-content__bg-image-3"></div>
            <div class="c-animated-content__bg-image-4"></div>
                <div class="c-animated-content__container">
                    <div class="c-animated-content__content">
                        <div class="c-animated-content__action">
                            <img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/cbd-swap-module-4-textX1.png}}"
                            alt="Swap it for free">
                            <img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/cbd-swap-module-4-textX2.png}}"
                            alt="Swap it for free">
                            <div class="mobile-img no-content lax"
                            data-lax-translate-x="(vh) 400, (-elh/2) 0 | speed=2 offset=-500"
                            data-lax-anchor="self">
                                <img src="{{media url=cbd-swap/cbd-quality-block/[email protected]}}"
                                alt="Hands swap">
                            </div>
                            <div class="c-animated-content__button-box" data-aos="fade-up">
                                <button onclick="window.location='/cbd-swap-funnel'" class="c-animated-content__button">Swap Your CBD
                                </button>
                        </div>
                    </div>
                    <div class="c-icons" data-aos="fade-up" data-aos-offset="300">
                        <ul class="c-icons__icons-list">
                            <li>
                                <img src="{{media url=cbd-swap/cbd-quality-block/icons/nongmo_icon.svg}}" alt="Non GMO">
                                <span>Non-GMO</span>
                            </li>
                            <li>
                                <img src="{{media url=cbd-swap/cbd-quality-block/icons/usgrown_icon.svg}}" alt="US grown">
                                <span>US GROWN HEMP</span>
                            </li>
                            <li>
                                <img src="{{media url=cbd-swap/cbd-quality-block/icons/noharsh_icon.svg}}" alt="No harsh">
                                <span>No Harsh Chemical Pesticides</span>
                            </li>
                            <li>
                                <img src="{{media url=cbd-swap/cbd-quality-block/icons/glutenfree_icon.svg}}"
                                alt="Gluten free">
                                <span>Gluten Free</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="c-animated-content__image">
                    <img class="desktop-img lax"
                    data-lax-translate-x="(vh) -400, (-elh) 0 | speed=2 offset=-500"
                    data-lax-anchor="self"
                    src="{{media url=cbd-swap/cbd-quality-block/hands_swap_colorX2.png}}" alt="Hands swap">
                </div>
                <div class="c-animated-content__common-img-box">
                    <div class="c-animated-content__common-img-desktop lax"
                    data-lax-translate-x="(vh) 400, (-elh) 0 | speed=2 offset=-500"
                    data-lax-anchor="self">
                        <img class="common-img" src="{{media url=cbd-swap/cbd-quality-block/leaf_backgroundX1.png}}"
                        alt="Leaf">
                    </div>
                    <div class="c-animated-content__common-img-mobile lax"
                    data-lax-translate-x="(vh) -400, (-elh) 0 | speed=2 offset=-500"
                    data-lax-anchor="self">
                        <img class="common-img" src="{{media url=cbd-swap/cbd-quality-block/leaf_backgroundX1.png}}"
                    alt="Leaf">
                </div>
            </div>
        </div>
    </div>
</section>

Icons block

  • class="c-icons" - vertical position
  • class="c-icons c-icons--horizontal" - horizontal position
  • Non GMONon-GMO
  • US grownUS GROWN HEMP
  • No harshNo Harsh Chemical Pesticides
  • Gluten freeGluten Free

        
              
<div class="c-icons c-icons--horizontal" data-aos="fade-up" data-aos-offset="300">
    <ul class="c-icons__icons-list">
        <li>
            <img src="{{media url=cbd-swap/cbd-quality-block/icons/nongmo_icon.svg}}" alt="Non GMO">
            <span>Non-GMO</span>
        </li>
        <li>
            <img src="{{media url=cbd-swap/cbd-quality-block/icons/usgrown_icon.svg}}" alt="US grown">
            <span>US GROWN HEMP</span>
        </li>
        <li>
            <img src="{{media url=cbd-swap/cbd-quality-block/icons/noharsh_icon.svg}}" alt="No harsh">
            <span>No Harsh Chemical Pesticides</span>
        </li>
        <li>
            <img src="{{media url=cbd-swap/cbd-quality-block/icons/glutenfree_icon.svg}}"
            alt="Gluten free">
            <span>Gluten Free</span>
        </li>
    </ul>
</div>

Fullbleed background block

  • class="c-fullbleed-background" @brand-white
  • class="c-fullbleed-background c-component--light-bg" @olive-oil
DSC03614

Where Your CBD Comes From Matters

The Charlotte's Web proprietary hemp genetics have been expertly developed to have a rich phytochemical profile.

We Harvest When It's JUST Right

Throughout the flowering cycle we test our plants frequently, so they’re harvested when their phytochemical profile meets our standards.

        
        
<div id="c-fullbleed-background-1" class="c-fullbleed-background">
    <img id="c-fullbleed-background-1__image" class="c-fullbleed-background__image"
    src="{{media url=cbd-swap/fullbleed-background-block/DSC03614.png}}" alt="DSC03614">
    <div class="c-fullbleed-background__content-box">
        <div class="c-fullbleed-background__content c-fullbleed-background__content--mobile">
            <div data-aos="fade-up">
                <h3 class="c-fullbleed-background__title">Where Your CBD Comes From Matters</h3>
                <p class="c-fullbleed-background__text">
                The Charlotte's Web proprietary hemp genetics have been expertly developed to have a rich
                phytochemical profile.</p>
            </div>
        </div>
        <div class="c-fullbleed-background__content">
            <div data-aos="fade-up">
                <h3 class="c-fullbleed-background__title">We Harvest When It's JUST Right</h3>
                <p class="c-fullbleed-background__text">
                Throughout the flowering cycle we test our plants frequently,
                so they’re harvested when their phytochemical profile meets our standards. </p>
            </div>
        </div>
    </div>
</div>

Two column video block

    • class="c-two-column-content" @brand-white
    • class="c-two-column-content c-component--light-bg" @olive-oil

Learn why quality matters

cbd-swap-module-6-Image-1

How We Grow 2+ Million Hemp Plants

cbd-swap-module-6-Image-2

High-Quality CBD Products

        
        
<div class="c-two-column-content c-component--light-bg">
    <div class="c-two-column-content__subtitle"></div>
    <div class="c-two-column-content__title-box">
        <h2 class="c-two-column-content__title" data-aos="fade-up" data-aos-duration="900">Learn why quality matters</h2>
    </div>
    <div class="c-two-column-content__content-box">
        <div class="c-two-column-content__content" data-aos="fade-up" data-aos-duration="900"
        data-aos-anchor-placement="center-bottom">
            <div class="c-two-column-content-video">
                <div class="c-two-column-content-video__init-video" data-popup-trigger="one">
                    <img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-6-Image-1.jpg}}"
                       alt="cbd-swap-module-6-Image-1">
                </div>
                <h4 class="c-two-column-content-video__title">How We Grow 2+ Million Hemp Plants</h4>
            </div>
        </div>
        <div class="c-modal-video c-modal-video--shadow" data-popup-modal="one">
            <div class="c-modal-video__content-box">
                <button class="c-modal-video__close">Close</button>
                <div class="c-modal-video__content">
                    <iframe id="player1" width="100%" height="100%"
                    src="https://www.youtube.com/embed/xg4p-ckbses?version=3&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        <div class="c-two-column-content__content" data-aos="fade-up" data-aos-duration="900"
        data-aos-anchor-placement="center-bottom">
            <div class="c-two-column-content-video">
                <div class="c-two-column-content-video__init-video" data-popup-trigger="two">
                    <img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-6-Image-2.jpg}}"
                    alt="cbd-swap-module-6-Image-2">
                 </div>
                <h4 class="c-two-column-content-video__title">High-Quality CBD Products</h4>
            </div>
        </div>
        <div class="c-modal-video c-modal-video--shadow" data-popup-modal="two">
            <div class="c-modal-video__content-box">
                <button class="c-modal-video__close">Close</button>
                <div class="c-modal-video__content">
                    <iframe id="player2" width="100%" height="100%"
                    src="https://www.youtube.com/embed/qAW5SoNqJxI?version=3&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

Two column content block

  • class="c-two-column-content c-two-column-content--dirt" @brand-white
  • class="c-two-column-content c-two-column-content--dirt c-component--light-bg" @olive-oil

Scroll To Explore

Trust Earned by Dedication and Diligence to Quality Testing

From seed to shelf, Charlotte’s Web products are fully traceable. We have oversight over each step of the farming, development, and manufacturing processes to produce safe, dependable products.

Each Charlotte's Web product is U.S. Hemp Authority Certified, comes with a batch report and Certificate of Analysis (COA) from 3rd party testing.

cbd-swap-module-7-image-2

Quality Tested 20+ Times

We test our soil, water sources, harvested hemp and extracts more than 20 times from farm to final bottling to ensure our products don’t contain unhealthy levels of anything we don’t like—like heavy metals, pesticides, harmful microbes and mold. Other companies don't test to this extent.

cbd-swap-module-7-image-1-1

        
        
<div class="c-two-column-content c-two-column-content--dirt c-component--light-bg">
    <div class="c-two-column-content__subtitle" data-aos="fade-up">
        <h3>Scroll To Explore</h3>
    </div>
    <div class="c-two-column-content__content-box c-two-column-content__content-box--reversed">
        <div class="c-two-column-content__content c-two-column-content__content--img-first js-orderFix">
            <div class="c-two-column-content__copy" data-aos="fade-up">
                <h3 class="c-two-column-content__title">Trust Earned by Dedication and Diligence to Quality Testing </h3>
                <p class="c-two-column-content__text">From seed to shelf, Charlotte’s Web products are fully traceable. We
                have oversight over each step of the farming, development, and manufacturing processes to produce
                safe, dependable products.</p>
                <p class="c-two-column-content__text">Each Charlotte's Web product is U.S. Hemp Authority Certified, comes
                with a batch report and Certificate of Analysis (COA) from 3rd party testing.</p>
            </div>
    
            <div class="c-two-column-content__img js-orderFix" data-aos="fade-up">
                <img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-7-image-2.jpg}}"
                alt="cbd-swap-module-7-image-2">
            </div>
        </div>
    
        <div class="c-two-column-content__content js-orderFix">
            <div class="c-two-column-content__copy" data-aos="fade-up">
                <h3 class="c-two-column-content__title">Quality Tested 20+ Times</h3>
                <p class="c-two-column-content__text">We test our soil, water sources, harvested hemp and extracts more
                than 20 times from farm to final bottling to ensure our products don’t contain unhealthy levels of
                anything we don’t like—like heavy metals, pesticides, harmful microbes and mold. Other companies
                don't test to this extent.</p>
            </div>
            <div class="c-two-column-content__img c-two-column-content__img--scale-left js-orderFix" data-aos="fade-up">
                <img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-7-image-1-1.png}}"
                alt="cbd-swap-module-7-image-1-1">
            </div>
        </div>
    </div>
</div>

Centered image text overlay block

  • class="c-centered-img-text-overlay" @brand-white
  • class="c-centered-img-text-overlay c-component--light-bg" @olive-oil

Scroll To Swap Your CBD

ready to swapready to swap

Ready To Swap for free?

Swap your CBD

        
        
<section class="c-centered-img-text-overlay c-component--light-bg">
    <div class="c-centered-img-text-overlay__subtitle" data-aos="fade-up">
        <h3>Scroll To Swap Your CBD</h3>
    </div>
    <div class="c-centered-img-text-overlay__image-wrapper">
        <img data-aos="fade-right" data-aos-delay="300" data-aos-offset="300" data-aos-duration="500" class="mobile-img"
        src="{{media url=cbd-swap/ready-to-swap-for-free-block/cbd-swap-module-8-mobile.jpg}}" alt="ready to swap">
        <img data-aos="fade-right" data-aos-delay="300" data-aos-offset="50" data-aos-anchor-placement="center-bottom"
        data-aos-duration="500" class="desktop-img"
        src="{{media url=cbd-swap/ready-to-swap-for-free-block/cbd-swap-module-8.png}}" alt="ready to swap">
        <div class="container c-centered-img-text-overlay__content" data-aos="fade-up" data-aos-delay="350" data-aos-duration="800">
            <div class="c-centered-img-text-overlay__title">
                <h2>Ready To Swap for free?</h2>
            </div>
            <a class="btn button btn-primary" href="/cbd-swap-funnel">Swap your CBD</a>
        </div>
    </div>
</section>

Fullbleed background block 2

  • class="c-fullbleed-background" @brand-white
  • class="c-fullbleed-background c-component--light-bg" @olive-oil
cbd-swap-module-9

It Started with one girl

Charlotte Figi was diagnosed with a rare form of epilepsy. Her mother, Paige, extensively researched health options that led her to a little known plant compound called cannabidiol, or CBD.

in 2012

Paige contacted the Stanley Brothers looking for a non-psychoactive natural alternative for her then five-year-old daughter Charlotte. After seeing Charlotte’s response to the extract, the Stanley Brothers renamed their proprietary genetics Charlotte’s Web.

        
        
<div id="c-fullbleed-background-2" class="c-fullbleed-background">
    <img id="c-fullbleed-background-2__image" class="c-fullbleed-background__image" src="{{media url=cbd-swap/fullbleed-background-block/cbd-swap-module-9.jpg}}" alt="cbd-swap-module-9">

    <div class="c-fullbleed-background__content-box">

        <div class="c-fullbleed-background__content">
            <div data-aos="fade-up">
            <h3 class="c-fullbleed-background__title">It Started with one girl</h3>
            <p class="c-fullbleed-background__text">Charlotte Figi was diagnosed with a rare form of epilepsy. Her mother, Paige, extensively researched health options that led her to a little known plant compound called cannabidiol, or CBD.</p>
         </div>
    </div>

    <div class="c-fullbleed-background__content c-fullbleed-background__content--mobile">
        <div data-aos="fade-up">
            <h3 class="c-fullbleed-background__title">in 2012</h3>
            <p class="c-fullbleed-background__text">
            Paige contacted the Stanley Brothers looking for a non-psychoactive natural alternative for her then five-year-old daughter Charlotte.
            After seeing Charlotte’s response to the extract, the Stanley Brothers renamed their proprietary genetics Charlotte’s Web. </p>
        </div>
    </div>

    </div>
</div>

Products Grid Block

        
        
<section class="c-products">
    <ul class="c-products__grid products list items product-items products-widget-product-grid">
        <li class="c-products__item item product product-item col-lg-4 col-md-4 col-xs-12">
            {{widget type="CW\CBDSwap\Block\Product\Widget\Link" id_path="product/294"}}
        </li>
        <li class="c-products__item item product product-item col-lg-4 col-md-4 col-xs-12">
            {{widget type="CW\CBDSwap\Block\Product\Widget\Link" id_path="product/291"}}
        </li>
        <li class="c-products__item item product product-item col-lg-4 col-md-4 col-xs-12">
            {{widget type="CW\CBDSwap\Block\Product\Widget\Link" id_path="product/218"}}
        </li>
    </ul>
</section>