Goizueta Style Guide

Carousel Card

The Carousel Card component displays a title, subtitle, and media.
It is intended to be used within a carousel component.
The two variations of the carousel card depend on whether an image or video is uploaded.

Carousel Card Title

Carousel Card with Image

Carousel Card Title

Carousel Card with Video

Markup Details

                            <div class="carousel-card">
  <div class="carousel-card__inner">
    <div class="carousel-card__media">
      {% if carousel_card_image.media.type == 'image' %}
        <img src="{{ carousel_card_image.media.url }}" alt="{{ carousel_card_image.title }}">
      {% elseif carousel_card_image.media.type == 'video' %}
        <iframe src="{{ carousel_card_image.media.url }}" controls></iframe>
      {% endif %}
    </div>
    <div class="carousel-card__title">
      {{ carousel_card_image.title }}
    </div>
    <div class="carousel-card__subtitle">
      {{ carousel_card_image.subtitle }}
    </div>
  </div>
</div>
<div class="carousel-card" style="margin-top: 2rem;">
  <div class="carousel-card__inner">
    <div class="carousel-card__media">
      {% if carousel_card_video.media.type == 'image' %}
        <img src="{{ carousel_card_video.media.url }}" alt="{{ carousel_card_video.title }}">
      {% elseif carousel_card_video.media.type == 'video' %}
        <iframe src="{{ carousel_card_video.media.url }}" controls></iframe>
      {% endif %}
    </div>
    <div class="carousel-card__title">
      {{ carousel_card_video.title }}
    </div>
    <div class="carousel-card__subtitle">
      {{ carousel_card_video.subtitle }}
    </div>
  </div>
</div>