WebMD Ignite DX Engine

Cta: Default 

<section id="hgmCta-888" class="hgm-cta-expandable">
    <div class="hgm-cta-expandable__wrapper">
        <div class="container">
            <div class="row">
                <div class="offset-sm-9 col-sm-3 offset-md-10 col-md-2">
                    <a href="javascript:void(0)" title="Close" class="hgm-cta-expandable__close">Close <i class="fas fa-times"></i></a>
                </div>
            </div>
            <div class="row hgm-cta-expandable__row">
                <div class="col">
                    <h5>Take a joint pain assessment</h5>
                    <p>This is text to describe the action we want you to take.</p>
                    <a href="#" class="hgm-button">Take the assessment <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="col">
                    <h5>Take a joint pain assessment</h5>
                    <p>This is text to describe the action we want you to take.</p>
                    <a href="#" class="hgm-button">Take the assessment <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="col">
                    <h5>Take a joint pain assessment</h5>
                    <p>This is text to describe the action we want you to take.</p>
                    <a href="#" class="hgm-button">Take the assessment <i class="fas fa-chevron-right"></i></a>
                </div>
            </div><!-- &__row -->
        </div>
    </div><!-- &__wrapper -->
</section><!-- hgm-cta-expandable -->

<aside class="hgm-cta">
    <div class="row hgm-cta__row">
        <div class="col">
            <a href="http://cnn.com" class="hgm-button">First Button<i class="fas fa-chevron-right"></i></a>
            <a href="javascript:void(0)" class="hgm-button expand" data-expand-panel="hgmCta-888">Explore our knee care options<i class="far fa-plus"></i></a>
        </div>
    </div><!-- &__row -->
</aside><!-- hgm-cta -->
 
<section id="hgmCta-888" class="hgm-cta-expandable">
    <div class="hgm-cta-expandable__wrapper">
        <div class="container">
            <div class="row">
                <div class="offset-sm-9 col-sm-3 offset-md-10 col-md-2">
                    <a href="javascript:void(0)" title="Close" class="hgm-cta-expandable__close">Close <i class="fas fa-times"></i></a>
                </div>
            </div>
            <div class="row hgm-cta-expandable__row">
                <div class="col">
                    <h5>Take a joint pain assessment</h5>
                    <p>This is text to describe the action we want you to take.</p>
                    <a href="#" class="hgm-button">Take the assessment <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="col">
                    <h5>Take a joint pain assessment</h5>
                    <p>This is text to describe the action we want you to take.</p>
                    <a href="#" class="hgm-button">Take the assessment <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="col">
                    <h5>Take a joint pain assessment</h5>
                    <p>This is text to describe the action we want you to take.</p>
                    <a href="#" class="hgm-button">Take the assessment <i class="fas fa-chevron-right"></i></a>
                </div>
            </div><!-- &__row -->
        </div>
    </div><!-- &__wrapper -->
</section><!-- hgm-cta-expandable -->

<aside class="hgm-cta">
    <div class="row hgm-cta__row">
        <div class="col">
            <a href="http://cnn.com" class="hgm-button">First Button<i class="fas fa-chevron-right"></i></a>
            <a href="javascript:void(0)" class="hgm-button expand" data-expand-panel="hgmCta-888">Explore our knee care options<i class="far fa-plus"></i></a>
        </div>
    </div><!-- &__row -->
</aside><!-- hgm-cta -->
 
/* No context defined. */

Customizations

The sticky CTA can be customized via combination of css classes and data-attributes.

CSS Classes

  • bottom - set this class on the root element (hgm-cta) to position the CTA band & expandable (if defined) to the bottom of the browser window at mobile display widths.

Data Attributes

  • data-band-bg-color - background color of the CTA band; hex value expected
  • data-overlay-bg-color - background color of the overlay; hex value expected
  • data-overlay-bg-alpha - overlay opacity; a value between 1 & 99 expected
  • data-text-color - text color of the expandable; hex value expected
  • data-expandable-bg-color - background color of the expandable; hex value expected
  • data-expandable-divider-color - divider color between columns in the expandable; hex value expected