​ ​ ​ Cards - Card Decks | Crossroads Digital Design Kit ​
  1. UI COMPONENTS
  2. MOLECULES
  3. CARDS

UI Components/Cards

Card Decks

A card deck is a group of cards which share the same height as the tallest card in the deck. Height is determined by the length of content within a card, and the card with the most content will dictate the height of the other cards in the deck.

Default Card Deck

Adding a data attribute of data-crds-carousel="mobile-scroll" to a card deck and instantiating the crds-card-carousel script enables side-scrolling on mobile-sized screens only. On larger screens, the layout will be an expanded view, creating new rows for each set of four cards. The default speed, friction and drag threshold of the carousel scrolling can be overridden with data attribute options.

index.html 
<!DOCTYPE html>
<html>

<head>
  <title>Card Deck - Default</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" id="viewport-meta" />

  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  {% stylesheet_link_tag application %}

  <script src="https://use.typekit.net/ccb3vpa.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}

  </script>

  <script src="/examples/shared/theme_toggler.js"></script>
</head>

<body>
  <div class="card-deck carousel" data-crds-carousel="mobile-scroll">
    <div class="feature-cards card-deck--expanded-layout">
      <div class="card carousel-cell">
        <img class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg"
          alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg"
          alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="//unpkg.com/imgix.js@3.3.0/dist/imgix.min.js"></script>
  <script src="//unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <script src="//d1tmclqz61gqwd.cloudfront.net/javascripts/crds-card-carousel-v0.2.2.min.js"></script>

  <script>
    (function () {
      new CRDS.CardCarousels()
    })();
  </script>

</body>

</html>

Card Deck Carousel

Adding a data attribute of data-crds-carousel="always-scroll" to a card deck and instantiating the crds-card-carousel-script will create a side-scrolling effect on all screen sizes.

index.html 
<!DOCTYPE html>
<html>

<head>
  <title>Card Deck - Carousel</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" id="viewport-meta" />

  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  {% stylesheet_link_tag application %}

  <script src="https://use.typekit.net/ccb3vpa.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}

  </script>

  <script src="/examples/shared/theme_toggler.js"></script>
</head>

<body>
  <div class="card-deck carousel" data-crds-carousel="always-scroll">
    <div class="feature-cards">
      <div class="card carousel-cell">
        <img class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg"
          alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg"
          alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="card carousel-cell">
        <img class="card-img-top" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" alt="Card image caption">
        <div class="card-block">
          <h4 class="card-title card-title--overlap text-uppercase">Card Title</h4>
          <div class="card-text">
            <address>
              1632 Doubloon Cove
              <br> Astoria, OR 19840 (
              <a href="#">Map</a>)
            </address>

            <strong>Service Times:</strong>
            <ul class="list-unstyled">
              <li>SAT 4:30 &amp; 6:15pm;</li>
              <li>SUN 8:30am, 10:05am &amp; 11:55am</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="//unpkg.com/imgix.js@3.3.0/dist/imgix.min.js"></script>
  <script src="//unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <script src="//d1tmclqz61gqwd.cloudfront.net/javascripts/crds-card-carousel-v0.2.2.min.js"></script>

  <script>
    (function () {
      new CRDS.CardCarousels()
    })();

  </script>

</body>

</html>