Card Collection 

<div class="card-collection">
    <div class="card-collection__inner card-collection__inner--carousel">

        <a data-observe-resizes class="icon-card has-shadow">
            <div class="icon-card__image  " style="background-image: url('large')">
            </div>
            <div class="icon-card__content">
                <div class="icon-card__padder">
                    <h2 class="heading heading--small">Therapeutic</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
            </div>
        </a>

        <a data-observe-resizes class="icon-card has-shadow">
            <div class="icon-card__image  " style="background-image: url('large')">
            </div>
            <div class="icon-card__content">
                <div class="icon-card__padder">
                    <h2 class="heading heading--small">Research & discovery</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore sectetur adipiscing elit, sed do eiusmod tempor.
                </div>
            </div>
        </a>

        <a data-observe-resizes class="icon-card has-shadow">
            <div class="icon-card__image  " style="background-image: url('large')">
            </div>
            <div class="icon-card__content">
                <div class="icon-card__padder">
                    <h2 class="heading heading--small">Patients & care givers 1</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
            </div>
        </a>

        <a data-observe-resizes class="icon-card has-shadow">
            <div class="icon-card__image  " style="background-image: url('large')">
            </div>
            <div class="icon-card__content">
                <div class="icon-card__padder">
                    <h2 class="heading heading--small">Patients & care givers 2</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
            </div>
        </a>

        <a data-observe-resizes class="icon-card has-shadow">
            <div class="icon-card__image  " style="background-image: url('large')">
            </div>
            <div class="icon-card__content">
                <div class="icon-card__padder">
                    <h2 class="heading heading--small">Patients & care givers 3</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
            </div>
        </a>

        <a data-observe-resizes class="icon-card has-shadow">
            <div class="icon-card__image  " style="background-image: url('large')">
            </div>
            <div class="icon-card__content">
                <div class="icon-card__padder">
                    <h2 class="heading heading--small">Patients & care givers 4</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
            </div>
        </a>
    </div>
</div>
  • Content: 
    /* @card-collection */
.card-collection {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;

  &__inner {
    display: flex;
    // align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    .icon-card {
      flex: 1;
      min-width: 256px;
    }

    // &.card-collection__inner--stackable {
    //   .icon-card {
    //     width: 100%;
    //     flex: unset;
    //   }
    // }

    &:not(.flickity-enabled) {
      margin: -$base-spacing/4;

      .icon-card {
        flex-basis: 320px;
        margin: $base-spacing/2;

        &__image {
          max-height: 200px;
        }

        &.MD .icon-card__image {
          max-height: none!important;
        }
      }
    }

    &.flickity-enabled {
      display: block;
      width: 100vw;
      @include poly-margin-minus-left;

      @media (max-width: $medium-screen) {
        position: unset;
      }

      .flickity-viewport {
        padding: 0 30px;
      }

      .icon-card {
        height: auto;
        transition: opacity 0.2s;
        width: 80%;
        margin-right: $base-spacing;

        &:not(.is-next):not(.is-selected):not(.is-previous) {
          box-shadow: none !important;
          opacity: 0;          
        }
        
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
          display: block;
        }
      }

      @media (min-width: $medium-screen) {
        width: 100%;
        margin-left: 0!important;

        .icon-card {
          width: calc(50% - #{$base-spacing});
          height: auto;
        }
      }

      @media (min-width: $large-screen) {
        .icon-card {
          width: calc(33% - #{$base-spacing/2});
          height: auto;
        }
      }

      .flickity-button.next {
        @media (max-width: $medium-screen) {
         display: none;
        }
      }
    }
  }
}
  • URL: /components/raw/card-collection/_card-collection.scss
  • Filesystem Path: src/components/_support-blocks/card-layouts/card-collection/_card-collection.scss
  • Size: 1.9 KB
  • Content: 
    /* card-collection */
import $ from 'jQuery'
var jQueryBridget = require('jquery-bridget');
import Flickity from 'flickity'
jQueryBridget( 'flickity', Flickity, $ );

$(document).ready(function () {
  if ($('.card-collection__inner--carousel').length) {
  	$('.card-collection__inner--carousel').flickity({
      wrapAround: true,
      pageDots: false
    })
  }
})
  • URL: /components/raw/card-collection/card-collection.js
  • Filesystem Path: src/components/_support-blocks/card-layouts/card-collection/card-collection.js
  • Size: 366 Bytes