Component Library

Feature Set 

<div class="callout-set">
    <ul>
        <li>
            <div class="iastate22-callout">
                <div class="iastate22-callout__media">
                    <img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
                </div>
                <div class="iastate22-callout__content text-content">
                    <h3>Feature Title Lorem Ipsum Dolor</h3>
                    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                    <div class="link-set">
                        <ul>
                            <li>
                                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="iastate22-callout">
                <div class="iastate22-callout__media">
                    <img src="../../img/Component-Featured-Image-Small-2_FPO.jpg" alt="" width="622" height="414" loading="lazy">
                </div>
                <div class="iastate22-callout__content text-content">
                    <h3>Feature Title Lorem Ipsum Dolor</h3>
                    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                    <div class="link-set">
                        <ul>
                            <li>
                                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="iastate22-callout">
                <div class="iastate22-callout__media">
                    <img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
                </div>
                <div class="iastate22-callout__content text-content">
                    <h3>Feature Title Lorem Ipsum Dolor</h3>
                    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                    <div class="link-set">
                        <ul>
                            <li>
                                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
 
<div class="callout-set">
  <ul>
    {% for callout in callouts %}
    <li>
        {% include "@feature" with callout %}
    </li>
    {% endfor %}
  </ul>
</div>
 
{
  "callouts": [
    {
      "image": "../../img/Component-Featured-Image-Small_FPO.jpg",
      "title": "Feature Title Lorem Ipsum Dolor",
      "body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "links": [
        {
          "url": "https://iastate.edu",
          "text": "Link Lorem Ipsum Dolor",
          "variant": "iastate22-link-secondary"
        }
      ]
    },
    {
      "image": "../../img/Component-Featured-Image-Small-2_FPO.jpg",
      "title": "Feature Title Lorem Ipsum Dolor",
      "body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "links": [
        {
          "url": "https://iastate.edu",
          "text": "Link Lorem Ipsum Dolor",
          "variant": "iastate22-link-secondary"
        }
      ]
    },
    {
      "image": "../../img/Component-Featured-Image-Small_FPO.jpg",
      "title": "Feature Title Lorem Ipsum Dolor",
      "body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "links": [
        {
          "url": "https://iastate.edu",
          "text": "Link Lorem Ipsum Dolor",
          "variant": "iastate22-link-secondary"
        }
      ]
    }
  ]
}
  • Content: 
    .paragraph-widget--callout-set {
  margin: rem(30) 0 rem(50) 0;
  .iastate22-callout--no-image .iastate22-callout__content,
  .iastate22-callout__media {
    @include media-breakpoint-up(xl) {
      margin-left: rem(-112);
    }
  }
}

.callout-set {
  position: relative;
  &:before {
    @include media-breakpoint-up(lg) {
      content: "";
      background-color: $off-white;
      position: absolute;
      top: 0;
      bottom: 0;
      left: rem(-70);
      width: 50%;
      max-width: rem(386);
    }
    @include media-breakpoint-up(xl) {
      left: rem(-190);
    }
  }
  > ul {
    @include media-breakpoint-up(lg) {
      padding-top: rem(60);
      padding-bottom: rem(10);
    }
    > li {
      margin-bottom: rem(51);
      @include media-breakpoint-up(xl) {
        margin-bottom: rem(35);
      }
    }
  }
  .link-set {
    ul {
      @include media-breakpoint-up(md) {
        padding-top: 0;
        padding-bottom: 0;
      }
      li {
        margin: 0 0 rem(12) 0;
      }
    }
  }
}
  • URL: /components/raw/feature-set/_feature-set.scss
  • Filesystem Path: src/components/feature-set/_feature-set.scss
  • Size: 1 KB

Feature Set

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • This is a companion component associated with the feature component which outputs multiple instances with a background color included
  • The custom styles are imported into the index.scss file as @import "../components/feature-set/feature-set";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--callout-set">.