Component Library

Card Set: Title 

<div class="card-set">
    <h2 class="card-set__title">Featured Events</h2>
    <ul>
        <li>
            <div class="iastate22-card">
                <div class="iastate22-card__media">
                    <img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
                </div>
                <div class="iastate22-card__content">
                    <h2 class="iastate22-card__title">
                        <a href="https://www.iastate.edu/">Card Title Lorem Ipsum Dolor Sit Amet </a>
                    </h2>
                    <div class="iastate22-card__body text-content">
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
                    </div>
                    <a href="https://www.iastate.edu/" class="iastate22-card__cta">Optional Link Text Lorem</a>
                </div>
            </div>
        </li>
        <li>
            <div class="iastate22-card">
                <div class="iastate22-card__media">
                    <img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="600" height="600">
                </div>
                <div class="iastate22-card__content">
                    <h2 class="iastate22-card__title">
                        <a href="https://www.iastate.edu/" target="_blank">External Example - Card Title Lorem Ipsum</a>
                    </h2>
                    <div class="iastate22-card__body text-content">
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
                    </div>
                    <a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
                </div>
            </div>
        </li>
        <li>
            <div class="iastate22-card">
                <div class="iastate22-card__media">
                    <img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="600" height="600">
                </div>
                <div class="iastate22-card__content">
                    <h2 class="iastate22-card__title">
                        <a href="https://www.iastate.edu/">Card Title Lorem Ipsum Dolor Sit Amet </a>
                    </h2>
                    <div class="iastate22-card__body text-content">
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
                    </div>
                    <a href="https://www.iastate.edu/" class="iastate22-card__cta">Optional Link Text Lorem</a>
                </div>
            </div>
        </li>
    </ul>
</div>
 
<div class="card-set{% if teaser_news %} card-set--teaser{% elseif teaser_profile %} card-set--teaser {% elseif teaser_profile %} card-set--teaser{% endif %}">
  <h2 class="card-set__title">Featured Events</h2>
  <ul>
    {% for card in cards %}
      {% if with_modal %}
        <li>{% include "@card--with-modal" with card %}</li>
      {% elseif teaser_news %}
        <li>{% include "@card--teaser-news" with card %}</li>
      {% elseif teaser_profile %}
        <li>{% include "@card--teaser-profile" with card %}</li>
      {% elseif recent_articles %}
        <li>{% include "@card--recent-article" with card %}</li>
      {% elseif news_articles %}
        <li>{% include "@card--news-article" with card %}</li>
      {% elseif teaser_event %}
        <li>{% include "@card--event" with card %}</li>
      {% else %}
        <li>{% include "@card" with card %}</li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
 
{
  "cards": [
    {
      "title": "Card Title Lorem Ipsum Dolor Sit Amet ",
      "body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
      "image": "../../img/Component-Card-Image-1.jpg",
      "url": "https://www.iastate.edu/",
      "external": false,
      "cta": {
        "url": "https://www.iastate.edu/",
        "text": "Optional Link Text Lorem"
      }
    },
    {
      "title": "External Example - Card Title Lorem Ipsum",
      "body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
      "image": "../../img/Component-Card-Image-2.jpg",
      "url": "https://www.iastate.edu/",
      "external": true,
      "cta": {
        "url": "https://www.iastate.edu/",
        "text": "Optional Link Text Lorem"
      }
    },
    {
      "title": "Card Title Lorem Ipsum Dolor Sit Amet ",
      "body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
      "image": "../../img/Component-Card-Image-3.jpg",
      "url": "https://www.iastate.edu/",
      "external": false,
      "cta": {
        "url": "https://www.iastate.edu/",
        "text": "Optional Link Text Lorem"
      }
    }
  ]
}
  • Content: 
    .paragraph-widget--card-set {
  @extend %extended-component-width;
  @include media-breakpoint-up(xl) {
    margin-left: rem(-20);
    margin-right: rem(-128);
    margin-bottom: rem(60);
  }
}

.card-set {
  position: relative;
  padding-bottom: rem(20);
  @include media-breakpoint-up(lg) {
    padding-bottom: rem(30);
  }
  &.card-set--teaser {
    ul {
      @include media-breakpoint-up(md) {
        margin-right: 0;
      }
      li {
        max-width: 100%;
        margin-bottom: rem(100);
        position: relative;
        @include media-breakpoint-up(md) {
          width: 100%;
          padding-right: 0;
        }
        &:last-child {
          &:after {
            display: none;
          }
        }
        &:after {
          content: "";
          border-bottom: rem(1) solid $light-grey;
          position: absolute;
          bottom: rem(-30);
          left: 0;
          right: 0;
          z-index: 1;
          opacity: 0;
          @include media-breakpoint-up(sm) {
            opacity: 1;
          }
          @include media-breakpoint-up(md) {
            bottom: rem(-46);
          }
          @include media-breakpoint-up(xl) {
            left: rem(-108);
            right: rem(-108);
          }
        }
      }
    }
    &:after {
      display: none;
    }
  }
  .recent-articles & {
    ul {
      display: block;
      gap: rem(20);
      @include media-breakpoint-up(lg) {
        display: flex;
      }
      li {
        width: 100%;
        margin-bottom: rem(25);
        @include media-breakpoint-up(lg) {
          padding: 0;
          width: 31%;
          margin: 0;
        }
      }
    }
  }
  &:after {
    content: "";
    background-color: $off-white;
    position: absolute;
    bottom: 0;
    left: rem(-36);
    right: rem(-36);
    height: 20%;
    max-height: rem(342);
    @include media-breakpoint-up(md) {
      left: rem(-70);
      right: rem(-70);
    }
    @include media-breakpoint-up(lg) {
      content: "";
      background-color: $off-white;
      max-height: rem(365);
      position: absolute;
      bottom: 0;
      left: rem(-70);
      right: rem(-70);
      height: 62%;
    }
    @include media-breakpoint-up(xl) {
      left: rem(-170);
      right: rem(-170);
      max-height: rem(340);
    }
    @include media-breakpoint-up(xxl) {
      left: -50vw;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }
  }
  > ul {
    display: flex;
    flex-wrap: wrap;
    @include media-breakpoint-up(md) {
      margin-right: rem(-20);
    }
    @include media-breakpoint-up(lg) {
      margin-right: rem(-40);
    }
    &:after {
      display: none;
      @include media-breakpoint-up(md) {
        content: "";
        flex: 0 1 auto;
        width: 50%;
        display: block;
      }
      @include media-breakpoint-up(lg) {
        display: none;
      }
    }
    > li {
      max-width: rem(400);
      margin: 0 auto rem(30);
      flex: 0 1 auto;
      width: 100%;
      @include media-breakpoint-up(md) {
        width: 50%;
        padding-right: rem(20);
      }
      @include media-breakpoint-up(lg) {
        max-width: none;
        width: 33.3%;
        padding-right: rem(40);
      }
    }
  }
}

.card-set__title {
  text-align: center;
}
  • URL: /components/raw/card-set/_card-set.scss
  • Filesystem Path: src/components/card-set/_card-set.scss
  • Size: 3.3 KB

Card Set

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • This is a companion component to the card component which outputs multiple instances of the cards, this should typically be used for output globally
  • This outputs the standard card component default, but can output other card variants as well - card--with-modal variant by setting with_modal to true in the config, card--teaser-news by setting teaser_news to true in the config, or card--teaser-profile by setting teaser_profile to true in the config
  • The custom styles are imported into the index.scss file as @import "../components/card-set/card-set";
  • There is a paragraph-widget wrapper for these components for use in page context <div class="paragraph-widget paragraph-widget--card-set">