Small Card List Staggered
<h2 class="component-title">Carousel Title</h2>
<div class="cards-small-list-staggered carousel js-small-card-list-staggered-carousel">
<div class="cards-small-list-staggered__cards js-small-card-list-staggered-cards">
<a href="#" class="cards-small-list-staggered__card is-theme-1">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/1.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 1 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-2">
<div class="cards-small-list-staggered__card-header">
<img src="/images/placeholder/672x378.png" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 2 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-3">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/3.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 3 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-4">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/4.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 4 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-5">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/5.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 5 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-1">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/6.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 6 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-2">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/7.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 7 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-3">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/8.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 8 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-4">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/9.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 9 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
<a href="#" class="cards-small-list-staggered__card is-theme-5">
<div class="cards-small-list-staggered__card-header">
<img src="/images/photos/10.jpg" alt="" class="cards-small-list-staggered__img img-responsive" />
</div>
<div class="cards-small-list-staggered__card-body">
<div class="cards-small-list-staggered__card-title">Card 10 - Lorem ipsum dolor sit onelongwordtowrap</div>
<div class="cards-small-list-staggered__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</div>
</div>
</a>
</div>
</div>
.cards-small-list-staggered {
position: relative;
margin-bottom: 4.8rem;
@media (min-width: $breakpoint-desktop) {
padding-bottom: 1.6rem;
}
}
.cards-small-list-staggered__cards {
position: relative;
}
.cards-small-list-staggered__card {
position: relative;
width: 25.6rem;
min-height: 38rem;
color: $color-base-white;
&:focus {
outline: none;
}
&.is-theme-1 {
background-color: $color-blue-medium;
color: $color-base-white;
}
&.is-theme-2 {
background-color: $color-blue-light;
color: $color-base-blue;
}
&.is-theme-3 {
background-color: $color-blue-dark;
color: $color-base-white;
}
&.is-theme-4 {
background-color: $color-grey-dark;
color: $color-base-white;
}
&.is-theme-5 {
background-color: $color-base-blue;
color: $color-base-white;
}
&:hover {
text-decoration: none;
color: $color-blue-light;
background-color: $color-base-blue;
}
@media (min-width: $breakpoint-desktop) {
&.is-theme-1 {
margin-top: 3.2rem;
}
&.is-theme-2 {
margin-top: 9.2rem;
}
&.is-theme-3 {
margin-top: 0;
}
&.is-theme-4 {
margin-top: 12.8rem;
}
&.is-theme-5 {
margin-top: 6.4rem;
}
}
}
.cards-small-list-staggered__card-body {
padding: 1.6rem;
}
.cards-small-list-staggered__card-title {
@include typeHeadline(true);
display: block;
overflow: hidden;
margin-bottom: 1.2rem;
overflow-wrap: break-word;
}
$(document).ready(function () {
$(".js-small-card-list-staggered-carousel").each(function (index, elem) {
$carousel = $(this);
$cards = $carousel.find(".js-small-card-list-staggered-cards");
$cards.slick({
arrows: false,
mobileFirst: true,
centerMode: true,
centerPadding: "3.2rem",
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 1199,
settings: {
arrows: true,
centerMode: false,
slidesToShow: 5,
slidesToScroll: 5,
},
},
],
});
});
});