Image Card Carousel Variant
<div class="image-card-carousel-alt js-image-card-carousel-alt">
<div class="image-card-carousel-alt__inner">
<div class="image-card-carousel-alt__group">
<div class="image-card-carousel-alt__title-group">
<h2 class="component-subtitle">IMAGE CARD CAROUSEL VARIANT</h2>
</div>
<div class="image-card-carousel-alt__title-group">Description Text</div>
</div>
<div class="image-card-carousel-alt__carousel carousel carousel--minimal">
<div class="js-image-cards">
<!-- Image Card Slide 1 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Lorem ipsum dolor sit</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 1 -->
<!-- Image Card Slide 2 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Image Card</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 2 -->
<!-- Image Card Slide 3 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Lorem ipsum dolor sit</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 3 -->
<!-- Image Card Slide 4 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Image Card</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 4 -->
<!-- Image Card Slide 5 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Lorem ipsum dolor sit</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 5 -->
<!-- Image Card Slide 6 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Image Card</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 6 -->
<!-- Image Card Slide 7 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Lorem ipsum dolor sit</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 7 -->
<!-- Image Card Slide 8 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Image Card</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 8 -->
<!-- Image Card Slide 9 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Lorem ipsum dolor sit</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 9 -->
<!-- Image Card Slide 10 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Image Card</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 10 -->
<!-- Image Card Slide 11 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Lorem ipsum dolor sit</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 11 -->
<!-- Image Card Slide 12 -->
<div class="image-card__slide">
<div class="image-card-alt">
<div class="image-card-alt__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card-alt__img" />
</div>
<div class="image-card-alt__group">
<h3 class="image-card-alt__title">Image Card</h3>
<a href="#" data-toggle="tooltip" data-placement="auto" title="Tooltip with info text">
<i class="fa fa-info-circle text-primary"></i>
</a>
</div>
<a href="#" class="image-card-alt__action">Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
<a href="#" class="image-card-alt__action">Optional Link <i class="fa fa-long-arrow-right image-card-alt__icon"></i> </a>
</div>
</div>
<!-- /Image Card Slide 12 -->
</div>
</div>
</div>
</div>
.image-card-carousel-alt {
padding: 2.4rem 0;
margin-bottom: 4rem;
background-color: $color-base-grey;
}
.image-card-carousel-alt__inner {
max-width: 1170px;
margin: 0 auto;
padding: 0 15px;
}
.image-card-carousel-alt__group {
@include typeBody(true);
color: $color-grey-dark;
display: flex;
align-items: center;
flex-direction: column;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
}
}
.image-card-carousel-alt__carousel {
margin: 0 -1.5rem;
.slick-track {
margin: 0; // Align left items
}
}
.image-card-alt__slide {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.image-card-alt {
display: flex;
flex-direction: column;
margin-bottom: 3.2rem;
color: $color-base-blue;
word-break: break-word;
}
.image-card-alt__media {
margin-bottom: 0.8rem;
}
.image-card-alt__img {
display: block;
max-width: 100%;
height: auto;
}
.image-card-alt__group {
margin-bottom: 1.2rem;
}
.image-card-alt__title {
@include typeTitle(true);
margin: 0.4rem;
display: inline;
}
.image-card-alt__desc {
margin: 0.4rem;
}
.image-card-alt__action {
color: $color-blue-medium;
margin: 0.4rem 0.4rem 1.2rem;
&:focus {
outline: 0;
}
}
.image-card-alt__icon {
display: inline;
}
$(function () {
const $component = $(".js-image-card-carousel-alt");
$component.each(function () {
const $carousel = $(this);
const $cards = $carousel.find(".js-image-cards");
$cards.slick({
arrows: false,
centerMode: false,
infinite: true,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
responsive: [
{
breakpoint: 767,
settings: {
arrows: true,
centerMode: false,
infinite: false,
slidesToScroll: 4,
slidesToShow: 4,
},
},
{
breakpoint: 1199,
settings: {
arrows: true,
centerMode: false,
infinite: false,
slidesToShow: 6,
slidesToScroll: 6,
},
},
],
});
});
});
$('[data-toggle="tooltip"]').tooltip();