WebMD Ignite DX Engine

Card Carousel: Testimonial 

<div class="glide hgm-card-carousel" data-carousel-per-view="3">
    <div class="container">
        <div class="hgm-card-carousel__header row">
            <div class="col-sm-12">
                <h3>Card Carousel (Showing Testimonials)</h3>
                <p>Add a header or some messaging about this carousel content to clue users in on what they are seeing.</p>
            </div>
            <div class="col-sm-12">
                <a href="#" title="Learn more">View more&nbsp;<i class="fa-solid fa-chevron-right"></i></a>
            </div>
        </div><!-- &__header -->
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card hgm-card--testimonial">
                            <div class="hgm-card__header vertical">
                                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo" />
                                <div class="hgm-card__header-person">
                                    <h6>Emily Robertson</h6>

                                    <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 4 out of 5 stars" data-rating="4">
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <cite>from <span>Google</span></cite>
                                    </div><!-- &__header-person-ratings -->

                                    <div class="hgm-card__header-person-quote">
                                        <div><i class="fa-solid fa-message-quote"></i></div>
                                    </div><!-- &__header-person-quote -->

                                </div><!-- &__header-person -->
                            </div><!-- &__header -->
                            <div class="hgm-card__body">
                                <p>
                                    I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                                </p>
                            </div><!-- &__body -->
                        </div><!-- hgm-card -->
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card hgm-card--testimonial">
                            <div class="hgm-card__header vertical">
                                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo" />
                                <div class="hgm-card__header-person">
                                    <h6>John Smith</h6>

                                    <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 3 out of 5 stars" data-rating="3">
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <cite>from <span>Google</span></cite>
                                    </div><!-- &__header-person-ratings -->

                                    <div class="hgm-card__header-person-quote">
                                        <div><i class="fa-solid fa-message-quote"></i></div>
                                    </div><!-- &__header-person-quote -->

                                </div><!-- &__header-person -->
                            </div><!-- &__header -->
                            <div class="hgm-card__body">
                                <p>
                                    I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                                </p>
                            </div><!-- &__body -->
                        </div><!-- hgm-card -->
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card hgm-card--testimonial">
                            <div class="hgm-card__header vertical">
                                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo" />
                                <div class="hgm-card__header-person">
                                    <h6>Billy Johnson</h6>

                                    <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 3.5 out of 5 stars" data-rating="3.5">
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <cite>from <span>Google</span></cite>
                                    </div><!-- &__header-person-ratings -->

                                    <div class="hgm-card__header-person-quote">
                                        <div><i class="fa-solid fa-message-quote"></i></div>
                                    </div><!-- &__header-person-quote -->

                                </div><!-- &__header-person -->
                            </div><!-- &__header -->
                            <div class="hgm-card__body">
                                <p>
                                    Ratings can also accept half points!
                                </p>
                            </div><!-- &__body -->
                        </div><!-- hgm-card -->
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card hgm-card--testimonial">
                            <div class="hgm-card__header vertical">
                                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo" />
                                <div class="hgm-card__header-person">
                                    <h6>Lily Atkins</h6>

                                    <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 4 out of 5 stars" data-rating="4">
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <cite>from <span>Google</span></cite>
                                    </div><!-- &__header-person-ratings -->

                                    <div class="hgm-card__header-person-quote">
                                        <div><i class="fa-solid fa-message-quote"></i></div>
                                    </div><!-- &__header-person-quote -->

                                </div><!-- &__header-person -->
                            </div><!-- &__header -->
                            <div class="hgm-card__body">
                                <p>
                                    I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                                </p>
                            </div><!-- &__body -->
                        </div><!-- hgm-card -->
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card hgm-card--testimonial">
                            <div class="hgm-card__header vertical">
                                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo" />
                                <div class="hgm-card__header-person">
                                    <h6>Susan Gibson</h6>

                                    <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 5 out of 5 stars" data-rating="5">
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <cite>from <span>Google</span></cite>
                                    </div><!-- &__header-person-ratings -->

                                    <div class="hgm-card__header-person-quote">
                                        <div><i class="fa-solid fa-message-quote"></i></div>
                                    </div><!-- &__header-person-quote -->

                                </div><!-- &__header-person -->
                            </div><!-- &__header -->
                            <div class="hgm-card__body">
                                <p>
                                    I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                                </p>
                            </div><!-- &__body -->
                        </div><!-- hgm-card -->
                    </div><!-- &__slide-component -->
                </li>
            </ul>
        </div>
        <div class="hgm-card-carousel__footer row">
            <div class="glide__bullets col-md-8" data-glide-el="controls[nav]">
                <button class="glide__bullet" data-glide-dir="=0"></button>
                <button class="glide__bullet" data-glide-dir="=1"></button>
                <button class="glide__bullet" data-glide-dir="=2"></button>
                <button class="glide__bullet" data-glide-dir="=3"></button>
                <button class="glide__bullet" data-glide-dir="=4"></button>
            </div><!-- &__bullets -->
            <div class="glide__arrows col-md-4" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="sr-only">previous</span>
                </button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="sr-only">next</span></button>
            </div><!-- &__arrows -->
        </div><!-- &__footer -->
    </div><!-- container -->
</div><!-- hgm-card-carousel -->
 
<div class="glide hgm-card-carousel" data-carousel-per-view="3">
  <div class="container">
    <div class="hgm-card-carousel__header row">
      <div class="col-sm-12">
        <h3>Card Carousel (Showing Testimonials)</h3>
        <p>Add a header or some messaging about this carousel content to clue users in on what they are seeing.</p>
      </div>
      <div class="col-sm-12">
        <a href="#" title="Learn more">View more&nbsp;<i
            class="fa-solid fa-chevron-right"
        ></i></a>
      </div>
    </div><!-- &__header -->
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card hgm-card--testimonial">
              <div class="hgm-card__header vertical">
                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo"/>
                <div class="hgm-card__header-person">
                  <h6>Emily Robertson</h6>

                  <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 4 out of 5 stars" data-rating="4">
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <cite>from <span>Google</span></cite>
                  </div><!-- &__header-person-ratings -->

                  <div class="hgm-card__header-person-quote">
                    <div><i class="fa-solid fa-message-quote"></i></div>
                  </div><!-- &__header-person-quote -->

                </div><!-- &__header-person -->
              </div><!-- &__header -->
              <div class="hgm-card__body">
                <p>
                  I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                </p>
              </div><!-- &__body -->
            </div><!-- hgm-card -->
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card hgm-card--testimonial">
              <div class="hgm-card__header vertical">
                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo"/>
                <div class="hgm-card__header-person">
                  <h6>John Smith</h6>

                  <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 3 out of 5 stars" data-rating="3">
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <cite>from <span>Google</span></cite>
                  </div><!-- &__header-person-ratings -->

                  <div class="hgm-card__header-person-quote">
                    <div><i class="fa-solid fa-message-quote"></i></div>
                  </div><!-- &__header-person-quote -->

                </div><!-- &__header-person -->
              </div><!-- &__header -->
              <div class="hgm-card__body">
                <p>
                  I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                </p>
              </div><!-- &__body -->
            </div><!-- hgm-card -->
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card hgm-card--testimonial">
              <div class="hgm-card__header vertical">
                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo"/>
                <div class="hgm-card__header-person">
                  <h6>Billy Johnson</h6>

                  <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 3.5 out of 5 stars" data-rating="3.5">
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <cite>from <span>Google</span></cite>
                  </div><!-- &__header-person-ratings -->

                  <div class="hgm-card__header-person-quote">
                    <div><i class="fa-solid fa-message-quote"></i></div>
                  </div><!-- &__header-person-quote -->

                </div><!-- &__header-person -->
              </div><!-- &__header -->
              <div class="hgm-card__body">
                <p>
                  Ratings can also accept half points!
                </p>
              </div><!-- &__body -->
            </div><!-- hgm-card -->
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card hgm-card--testimonial">
              <div class="hgm-card__header vertical">
                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo"/>
                <div class="hgm-card__header-person">
                  <h6>Lily Atkins</h6>

                  <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 4 out of 5 stars" data-rating="4">
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <cite>from <span>Google</span></cite>
                  </div><!-- &__header-person-ratings -->

                  <div class="hgm-card__header-person-quote">
                    <div><i class="fa-solid fa-message-quote"></i></div>
                  </div><!-- &__header-person-quote -->

                </div><!-- &__header-person -->
              </div><!-- &__header -->
              <div class="hgm-card__body">
                <p>
                  I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                </p>
              </div><!-- &__body -->
            </div><!-- hgm-card -->
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card hgm-card--testimonial">
              <div class="hgm-card__header vertical">
                <img alt="headshot" data-src="https://pikwizard.com/pw/medium/8808a94002d737b91d97cd9405c8fe74.avif" class="hgm-lazy hgm-card__header-photo"/>
                <div class="hgm-card__header-person">
                  <h6>Susan Gibson</h6>

                  <div class="hgm-card__header-person-ratings" role="img" aria-label="Rating: 5 out of 5 stars" data-rating="5">
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <div class="star"></div>
                    <cite>from <span>Google</span></cite>
                  </div><!-- &__header-person-ratings -->

                  <div class="hgm-card__header-person-quote">
                    <div><i class="fa-solid fa-message-quote"></i></div>
                  </div><!-- &__header-person-quote -->

                </div><!-- &__header-person -->
              </div><!-- &__header -->
              <div class="hgm-card__body">
                <p>
                  I needed some immediate care after an accident in the kitchen. I didn't know what to expect, but the team here at Crestner Health patched me up and I was home before I knew it. Fast, polite and very helpful!
                </p>
              </div><!-- &__body -->
            </div><!-- hgm-card -->
          </div><!-- &__slide-component -->
        </li>
      </ul>
    </div>
    <div class="hgm-card-carousel__footer row">
      <div class="glide__bullets col-md-8" data-glide-el="controls[nav]">
        <button class="glide__bullet" data-glide-dir="=0"></button>
        <button class="glide__bullet" data-glide-dir="=1"></button>
        <button class="glide__bullet" data-glide-dir="=2"></button>
        <button class="glide__bullet" data-glide-dir="=3"></button>
        <button class="glide__bullet" data-glide-dir="=4"></button>
      </div><!-- &__bullets -->
      <div class="glide__arrows col-md-4" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span
            class="sr-only"
        >previous</span>
        </button>
        <button
            class="glide__arrow glide__arrow--right"
            data-glide-dir=">"
        ><span class="sr-only">next</span></button>
      </div><!-- &__arrows -->
    </div><!-- &__footer -->
  </div><!-- container -->
</div><!-- hgm-card-carousel -->
 
/* No context defined. */

Customizations

The Card Carousel component uses data attributes to customize behavior.

Data Attributes (component-level)

  • data-carousel-autoplay - set the carousel to autoplay (interval is specified in milliseconds)
  • data-carousel-hoverpause - allow the carousel to pause on hover; works best when autoplay is enabled
  • data-carousel-animation-duration - duration of the animation in milliseconds
  • data-carousel-animation-timing - Easing function for the animation (linear, ease, ease-in, ease-out, ease-in-out)
  • data-carousel-per-view - Number of visible slides per view; default 3 slides
  • data-carousel-gap - Size of the space between slides; default 20 pixels
  • data-text-color - Set value to color name or hexadecimal value to change the color of the header text
  • data-link-color - Set value to color name or hexadecimal value to change the color of the header link
  • data-bg-color - Set value to color name or hexadecimal value to change the background color of the header