Lehigh Clutch Style Guide

Card Grid 

<div class="card-group">
    <div class="card">
        <div class="card-image">
            <img src="/img/maxresdefault.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="card-title">
                This is the Title 1 </h3>
            <div class="card-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="card-buttons">
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 1 Stuff Goes Here and It is Really Long</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 2</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <img src="/img/maxresdefault.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="card-title">
                This is the Title 2 </h3>
            <div class="card-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="card-buttons">
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 1</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 2</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <img src="/img/maxresdefault.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="card-title">
                This is the Title 3 </h3>
            <div class="card-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="card-buttons">
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 1</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 2</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <img src="/img/maxresdefault.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="card-title">
                This is the Title 4 </h3>
            <div class="card-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="card-buttons">
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 1</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
                <a href="#" class="btn btn-primary dark-grey" role="button">
                    <span class="button_text">Button 2</span>
                    <span class="arrow fal fa-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="card-group">
{% block cms_override %}
  {% for card in cards %}
    {% include "@card" with card only %}
  {% endfor %}
{% endblock cms_override %}
</div>
 
{
  "cards": {
    "1": {
      "card_img": "/img/maxresdefault.jpg",
      "card_link": null,
      "card_headline": "This is the Title 1",
      "card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "buttons": {
        "1": {
          "text": "Button 1 Stuff Goes Here and It is Really Long",
          "url": "#",
          "color": "dark-grey"
        },
        "2": {
          "text": "Button 2",
          "url": "#",
          "color": "dark-grey"
        }
      }
    },
    "2": {
      "card_img": "/img/maxresdefault.jpg",
      "card_link": null,
      "card_headline": "This is the Title 2",
      "card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "buttons": {
        "1": {
          "text": "Button 1",
          "url": "#",
          "color": "dark-grey"
        },
        "2": {
          "text": "Button 2",
          "url": "#",
          "color": "dark-grey"
        }
      }
    },
    "3": {
      "card_img": "/img/maxresdefault.jpg",
      "card_link": null,
      "card_headline": "This is the Title 3",
      "card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "buttons": {
        "1": {
          "text": "Button 1",
          "url": "#",
          "color": "dark-grey"
        },
        "2": {
          "text": "Button 2",
          "url": "#",
          "color": "dark-grey"
        }
      }
    },
    "4": {
      "card_img": "/img/maxresdefault.jpg",
      "card_link": null,
      "card_headline": "This is the Title 4",
      "card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "buttons": {
        "1": {
          "text": "Button 1",
          "url": "#",
          "color": "dark-grey"
        },
        "2": {
          "text": "Button 2",
          "url": "#",
          "color": "dark-grey"
        }
      }
    }
  }
}
  • Content: 
    .card-group {
  display: flex;
  flex-direction: column;
  margin-bottom: $space_and_half;
  margin-top: $space_and_half;

  @include media-breakpoint-up(md) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card {
    margin: $spacer !important;

    @include media-breakpoint-up(md) {
      flex: 0 0 30%;
      max-width: 30%;
    }
  }
}

.cssgrid {
  .card-group {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: $spacer;
    row-gap: $spacer;
    flex-direction: unset;
    flex-wrap: unset;

    @media (min-width: 1024px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 1400px) {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .card {
      flex: unset;
      max-width: unset;
      margin: 0 !important;
    }
  }
}
  • URL: /components/raw/card_grid/card_grid.scss
  • Filesystem Path: bits/05-sections/card_grid/card_grid.scss
  • Size: 779 Bytes

Display card grid section and shows the flexibility with different widths.