Card Grid: Three

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-card-grid l-wrap l-container--full">
    <div class="c-card-grid__container l-container" data-grid="three" data-layout="standard">

        <div class="c-card    " data-theme="gray" data-layout="bio">

            <div class="c-card__label-wrapper">
                <span class="c-card__label o-detail--7 ">People</span>
            </div>

            <div class="c-card__content-wrapper">

                <img class="o-image c-card__image" loading="lazy" src="../../images/card_bio.png" alt="Scott Doorley" />

                <div class="c-card__inner-wrapper">

                    <div class="c-card__title-wrapper">

                        <h3 class="o-heading c-card__title o-heading--h4-primary">
                            Scott Doorley
                        </h3>

                        <span class="bem(base_class, 'subtitle') o-body--p2">Creative Director</span>
                    </div>

                    <span class="c-card__topic o-detail--6">Global Topic text</span>

                </div>
            </div>
        </div>

        <div class="c-card    " data-theme="green" data-layout="event">

            <div class="c-card__label-wrapper">
                <span class="c-card__label o-detail--7 ">Event</span>
            </div>

            <div class="c-card__content-wrapper">

                <img class="o-image c-card__image" loading="lazy" src="../../images/card_event.png" alt="[Event Title 50 Char] Lorem ipsum dolor sit vulputate" />

                <div class="c-card__inner-wrapper">

                    <h3 class="o-heading c-card__title o-heading--h4-secondary">
                        [Event Title 50 Char] Lorem ipsum dolor sit vulput...
                    </h3>

                    <div class=c-card__columns>
                        <span class="o-caption--primary-caption2">07/27/24</span>
                        <span class="o-caption--primary-caption2">Single Event</span>
                        <span class="o-caption--primary-caption2">07/27/24</span>
                        <span class="o-caption--primary-caption2">In-Person</span>
                    </div>

                </div>
            </div>
        </div>

        <div class="c-card    " data-theme="pink" data-layout="page" style="background-image: url('../../images/texture-card-study.png'); background-size: cover;">

            <div class="c-card__label-wrapper">
                <span class="c-card__label o-detail--7 ">Read more</span>
            </div>

            <div class="c-card__content-wrapper">

                <h3 class="o-heading c-card__title o-heading--h3-primary">
                    Study
                </h3>

                <a class="o-button o-button--icon c-card__button has-icon" href="#">
                    <span class="o-icon">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                        </svg>
                    </span>
                </a>

            </div>
        </div>

        <div class="c-card    " data-theme="black" data-layout="course">

            <div class="c-card__label-wrapper">
                <span class="c-card__label o-detail--7 ">Course</span>
            </div>

            <div class="c-card__content-wrapper">

                <img class="o-image c-card__image" loading="lazy" src="../../images/card_event.png" alt="[Course Title 50 Char] Lorem ipsum dolor sit vulputate" />

                <div class="c-card__inner-wrapper">

                    <h3 class="o-heading c-card__title o-heading--h4-secondary">
                        [Course Title 50 Char] Lorem ipsum dolor sit vulpu...
                    </h3>

                    <div class=c-card__columns>
                        <span class="o-caption--primary-caption2">3 Units</span>
                        <span class="o-caption--primary-caption2">M, Tu, W, Th, F</span>
                        <span class="o-caption--primary-caption2">G / UG / E</span>
                        <span class="o-caption--primary-caption2">Fall-Winter '24</span>
                    </div>

                </div>
            </div>
        </div>

        <div class="c-card    " data-theme="teal" data-layout="page" style="background-image: url('../../images/texture-card-innovate.png'); background-size: cover;">

            <div class="c-card__label-wrapper">
                <span class="c-card__label o-detail--7 ">Read more</span>
            </div>

            <div class="c-card__content-wrapper">

                <h3 class="o-heading c-card__title o-heading--h3-primary">
                    Innovate
                </h3>

                <a class="o-button o-button--icon c-card__button has-icon" href="#">
                    <span class="o-icon">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                        </svg>
                    </span>
                </a>

            </div>
        </div>

        <div class="c-card    " data-theme="cream" data-layout="resource">

            <div class="c-card__label-wrapper">
                <span class="c-card__label o-detail--7 ">Tool</span>
            </div>

            <div class="c-card__content-wrapper">

                <h3 class="o-heading c-card__title o-heading--h3-primary">
                    Resource Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius maur...
                </h3>

                <h3 class="o-heading o-heading--md c-card__subtitle o-heading--h3-secondary">
                    Resource Subtitle 100 char] velit, sodales vel venenatis
                </h3>

                <span class="c-card__topic o-detail--6">Global Topic text</span>

            </div>
        </div>
    </div>
</div>


        {% set base_class = button.base_class|default('c-card-grid') %}

<div class="{{ bem(base_class) }} l-wrap l-container--full">
  <div class="{{ bem(base_class, 'container') }} l-container" data-grid="{{card_grid.columns}}" data-layout="{{card_grid.type}}">
    {% for card in card_grid.cards %}
      {% include "@card" with card %}
    {% endfor %}
  </div>
</div>


        
            
            {
  "card_grid": {
    "columns": "three",
    "type": "standard",
    "cards": [
      {
        "card": {
          "title": "Scott Doorley",
          "subtitle": "Creative Director",
          "label": "People",
          "image": "../../images/card_bio.png",
          "topic": "Global Topic text",
          "attributes": {
            "theme": "gray",
            "layout": "bio"
          }
        }
      },
      {
        "card": {
          "title": "[Event Title 50 Char] Lorem ipsum dolor sit vulputate",
          "label": "Event",
          "image": "../../images/card_event.png",
          "columns": [
            {
              "left": "07/27/24",
              "right": "Single Event"
            },
            {
              "left": "07/27/24",
              "right": "In-Person"
            }
          ],
          "attributes": {
            "theme": "green",
            "layout": "event"
          }
        }
      },
      {
        "card": {
          "title": "Study",
          "label": "Read more",
          "image": "../../images/texture-card-study.png",
          "url": "#",
          "attributes": {
            "theme": "pink",
            "layout": "page"
          }
        }
      },
      {
        "card": {
          "title": "[Course Title 50 Char] Lorem ipsum dolor sit vulputate",
          "label": "Course",
          "image": "../../images/card_event.png",
          "columns": [
            {
              "left": "3 Units",
              "right": "M, Tu, W, Th, F"
            },
            {
              "left": "G / UG / E",
              "right": "Fall-Winter '24"
            }
          ],
          "attributes": {
            "theme": "black",
            "layout": "course"
          }
        }
      },
      {
        "card": {
          "title": "Innovate",
          "label": "Read more",
          "image": "../../images/texture-card-innovate.png",
          "url": "#",
          "attributes": {
            "theme": "teal",
            "layout": "page"
          }
        }
      },
      {
        "card": {
          "title": "Resource Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris vel",
          "label": "Tool",
          "subtitle": "Resource Subtitle 100 char] velit, sodales vel venenatis",
          "topic": "Global Topic text",
          "image": "",
          "attributes": {
            "theme": "cream",
            "layout": "resource"
          }
        }
      }
    ]
  }
}

File:

Content:


                                /**
 * Card Grid
 **/
.c-card-grid {
  &__container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--ds-space);
    padding: var(--ds-space-xxxl) 0 var(--ds-space-sm);
    transition: padding var(--ds-animation-duration) var(--ds-animation-timing);

    @include media(">small") {
      grid-template-columns: repeat(2, 1fr);
    }

    @include media(">medium") {
      &[data-grid="three"] {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @include media(">large") {
      &[data-grid="four"] {
        grid-template-columns: repeat(4, 1fr);
      }

      &[data-grid="five"] {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @include media(">xlarge") {
      &[data-grid="five"] {
        grid-template-columns: repeat(5, minmax(280px, 1fr));
      }
    }


    &[data-layout="dynamic"] {
      @include media(">medium") {
        .c-card--dynamic {
          grid-column: span 2;
        }
      }
    }
  }
}

URL: /components/raw/card-grid/_card-grid.scss
Filesystem Path: components/03-organisms/card-grid/_card-grid.scss
Size: 981 Bytes

Handle: @card-grid--three
Variants (4): Five , Four , Three , Dynamic
Preview:
- With layout
- Component only
Filesystem Path: components/03-organisms/card-grid/card-grid.twig
References (1): @card

The card grid has two main properties. The columns property controls the number of cards per row. The options are three, four, and five.

The type property controls the style of layout. The options are standard and dynamic. A dynamic grid allows you to set the dynamic: true property per card. Doing this will tell the card to span 2 columns instead of one. You can use this along side the columns property to create a variety of layouts.