Large Card List Staggered

PREVIEW 
<h2 class="component-title">Carousel Title</h2>
<div class="cards-large-list-staggered carousel carousel--minimal js-large-card-list-staggered-carousel">
    <div class="cards-large-list-staggered__cards js-large-card-list-staggered-cards">
        <div class="cards-large-list-staggered__card cards-large-list-staggered__card--decoration is-even">
            <div class="cards-large-list-staggered__card-header">
                <img src="/images/photos/1.jpg" alt="" class="cards-large-list-staggered__img img-responsive" />
            </div>
            <div class="cards-large-list-staggered__card-body">
                <div class="cards-large-list-staggered__card-title">Card 1 - Lorem ipsum dolor sit</div>
                <div class="cards-large-list-staggered__content">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Lorem ipsum dolor <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Atque incidunt soluta <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                </div>
            </div>
        </div>

        <div class="cards-large-list-staggered__card cards-large-list-staggered__card--decoration is-odd">
            <div class="cards-large-list-staggered__card-header">
                <img src="/images/photos/2.jpg" alt="" class="cards-large-list-staggered__img img-responsive" />
            </div>
            <div class="cards-large-list-staggered__card-body">
                <div class="cards-large-list-staggered__card-title">Card 2 - Lorem ipsum dolor sit</div>
                <div class="cards-large-list-staggered__content">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Lorem ipsum dolor <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Atque incidunt soluta <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                </div>
            </div>
        </div>

        <div class="cards-large-list-staggered__card cards-large-list-staggered__card--decoration is-even">
            <div class="cards-large-list-staggered__card-header">
                <img src="/images/photos/3.jpg" alt="" class="cards-large-list-staggered__img img-responsive" />
            </div>
            <div class="cards-large-list-staggered__card-body">
                <div class="cards-large-list-staggered__card-title">Card 3 - Lorem ipsum dolor sit</div>
                <div class="cards-large-list-staggered__content">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Lorem ipsum dolor <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Atque incidunt soluta <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                </div>
            </div>
        </div>

        <div class="cards-large-list-staggered__card cards-large-list-staggered__card--decoration is-odd">
            <div class="cards-large-list-staggered__card-header">
                <img src="/images/photos/4.jpg" alt="" class="cards-large-list-staggered__img img-responsive" />
            </div>
            <div class="cards-large-list-staggered__card-body">
                <div class="cards-large-list-staggered__card-title">Card 4 - Lorem ipsum dolor sit</div>
                <div class="cards-large-list-staggered__content">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis aperiam eos itaque sunt!</p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Lorem ipsum dolor <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                    <p>
                        <a href="#" class="cards-large-list-staggered__action">Atque incidunt soluta <i class="fa fa-long-arrow-right"></i></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

.cards-large-list-staggered {
  position: relative;
  margin-bottom: 4.8rem;

  @media (min-width: $breakpoint-desktop) {
    padding-bottom: 1.6rem;
  }
}

.cards-large-list-staggered__cards {
  position: relative;
}

.cards-large-list-staggered__card {
  position: relative;
  width: 25.6rem;
  min-height: 38rem;
  color: $color-base-white;

  &:focus {
    outline: none;
  }

  &.is-odd {
    background-color: $color-blue-dark;
  }

  &.is-even {
    background-color: $color-base-blue;
  }

  @media (min-width: $breakpoint-desktop) {
    &.is-even {
      margin-top: 6.4rem;
    }
  }

  // Add optional color bars
  &.cards-large-list-staggered__card--decoration .cards-large-list-staggered__card-header {
    position: relative;

    &::before,
    &::after {
      position: absolute;
      z-index: 1;
      content: "";
      width: 3.2rem;
      height: 100%;
      top: 0;
      left: 0;
    }

    &::after {
      left: 3.2rem;
    }
  }

  // Specify decoration bar colors based on position
  &.cards-large-list-staggered__card--decoration.is-odd {
    .cards-large-list-staggered__card-header::before {
      background-color: rgba($color-green-medium, 0.7);
    }

    .cards-large-list-staggered__card-header::after {
      background-color: rgba($color-green-medium, 0.3);
    }
  }

  &.cards-large-list-staggered__card--decoration.is-even {
    .cards-large-list-staggered__card-header::before {
      background-color: rgba($color-green-light, 0.7);
    }

    .cards-large-list-staggered__card-header::after {
      background-color: rgba($color-green-light, 0.3);
    }
  }
}

.cards-large-list-staggered__card-body {
  padding: 1.6rem;
}

.cards-large-list-staggered__card-title {
  @include typeHeadline(true);
  display: block;
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.cards-large-list-staggered__action {
  @include typeBody(true);
  color: $color-blue-light;

  &:hover {
    color: $color-base-white;
  }
}

$(document).ready(function () {
  $(".js-large-card-list-staggered-carousel").each(function (index, elem) {
    $carousel = $(this);
    $cards = $carousel.find(".js-large-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: 3,
            slidesToScroll: 3,
          },
        },
      ],
    });
  });
});
URL copied to clipboard!