WebMD Ignite DX Engine

Card Carousel: Two Cards 

<div class="glide hgm-card-carousel" data-carousel-per-view="2" data-link-color="#3131ee" data-text-color="#111151">
    <div class="container">
        <div class="hgm-card-carousel__header row">
            <div class="col-sm-12">
                <h3>Card Carousel (Two Cards)</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 feed">
                            <div class="hgm-card__body event">
                                <div class="event__category">
                                    <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                                </div>
                                <h6>Card Title Goes Here</h6>
                                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                                <button type="button" class="hgm-button ghost full-width">View event details</button>
                            </div>
                        </div>
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card feed">
                            <div class="hgm-card__body event">
                                <div class="event__category">
                                    <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                                </div>
                                <h6>Card Title Goes Here</h6>
                                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                                <button type="button" class="hgm-button ghost full-width">View event details</button>
                            </div>
                        </div>
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card feed">
                            <div class="hgm-card__body event">
                                <div class="event__category">
                                    <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                                </div>
                                <h6>Card Title Goes Here</h6>
                                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                                <button type="button" class="hgm-button ghost full-width">View event details</button>
                            </div>
                        </div>
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card feed">
                            <div class="hgm-card__body event">
                                <div class="event__category">
                                    <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                                </div>
                                <h6>Card Title Goes Here</h6>
                                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                                <button type="button" class="hgm-button ghost full-width">View event details</button>
                            </div>
                        </div>
                    </div><!-- &__slide-component -->
                </li>
                <li class="glide__slide">
                    <div class="hgm-card-carousel__slide-component">
                        <div class="hgm-card feed">
                            <div class="hgm-card__body event">
                                <div class="event__category">
                                    <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                                </div>
                                <h6>Card Title Goes Here</h6>
                                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                                <button type="button" class="hgm-button ghost full-width">View event details</button>
                            </div>
                        </div>
                    </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="2" data-link-color="#3131ee" data-text-color="#111151">
  <div class="container">
    <div class="hgm-card-carousel__header row">
      <div class="col-sm-12">
        <h3>Card Carousel (Two Cards)</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 feed">
              <div class="hgm-card__body event">
                <div class="event__category">
                  <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                </div>
                <h6>Card Title Goes Here</h6>
                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                <button type="button" class="hgm-button ghost full-width">View event details</button>
              </div>
            </div>
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card feed">
              <div class="hgm-card__body event">
                <div class="event__category">
                  <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                </div>
                <h6>Card Title Goes Here</h6>
                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                <button type="button" class="hgm-button ghost full-width">View event details</button>
              </div>
            </div>
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card feed">
              <div class="hgm-card__body event">
                <div class="event__category">
                  <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                </div>
                <h6>Card Title Goes Here</h6>
                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                <button type="button" class="hgm-button ghost full-width">View event details</button>
              </div>
            </div>
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card feed">
              <div class="hgm-card__body event">
                <div class="event__category">
                  <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                </div>
                <h6>Card Title Goes Here</h6>
                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                <button type="button" class="hgm-button ghost full-width">View event details</button>
              </div>
            </div>
          </div><!-- &__slide-component -->
        </li>
        <li class="glide__slide">
          <div class="hgm-card-carousel__slide-component">
            <div class="hgm-card feed">
              <div class="hgm-card__body event">
                <div class="event__category">
                  <p><i class="fas fa-calendar-alt"></i>Event Category<span>+2 more</span></p>
                </div>
                <h6>Card Title Goes Here</h6>
                <p>Wednesday, September 22<br>11:00 AM - 12:30 PM</p>
                <button type="button" class="hgm-button ghost full-width">View event details</button>
              </div>
            </div>
          </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