Component Library

Feature Set: Video 

<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>
                        <p>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.</p>
                    </div>
                    <button class="iastate22-button iastate22-button--clear" data-micromodal-trigger=Video-Modal-FS-1>
      Link Lorem Ipsum Dolor
      <span class="icon-video">
        <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
          <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
          <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
        </svg>
      </span>
    </button>
                    <div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-FS-1" aria-hidden="false">
                        <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
                            <div class="iastate22-modal__container iastate22-modal__container-with-media" id="Video-Modal-FS-1-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FS-1-title">
                                <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
                                <div class="iastate22-modal__media">
                                    <div class="video-embed">
                                        <div class="video-embed__media-wrap">
                                            <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
                                            <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
                                        </div>
                                        <div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                                            aliquip ex ea commodo consequat.</div>
                                    </div>
                                </div>
                                <div class="iastate22-modal__content">
                                    <h2 class="iastate22-modal__title" id="Video-Modal-FS-1-title">Video Modal</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </li>
        <li>
            <div class="iastate22-callout">
                <div class="iastate22-callout__media">
                    <img src="../../img/Component-Featured-Image-Small_FPO-2.jpg" alt="" width="622" height="414" loading="lazy">
                </div>
                <div class="iastate22-callout__content text-content">
                    <h3>Feature Title Lorem Ipsum Dolor</h3>
                    <div>
                        <p>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.</p>
                    </div>
                    <button class="iastate22-button iastate22-button--clear" data-micromodal-trigger=Video-Modal-FS-2>
      Link Lorem Ipsum Dolor
      <span class="icon-video">
        <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
          <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
          <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
        </svg>
      </span>
    </button>
                    <div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-FS-2" aria-hidden="false">
                        <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
                            <div class="iastate22-modal__container iastate22-modal__container-with-media" id="Video-Modal-FS-2-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FS-2-title">
                                <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
                                <div class="iastate22-modal__media">
                                    <div class="video-embed">
                                        <div class="video-embed__media-wrap">
                                            <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
                                            <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
                                        </div>
                                        <div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                                            aliquip ex ea commodo consequat.</div>
                                    </div>
                                </div>
                                <div class="iastate22-modal__content">
                                    <h2 class="iastate22-modal__title" id="Video-Modal-FS-2-title">Video Modal</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                                </div>
                            </div>
                        </div>
                    </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>
                        <p>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.</p>
                    </div>
                    <button class="iastate22-button iastate22-button--clear" data-micromodal-trigger=Video-Modal-FS-3>
      Link Lorem Ipsum Dolor
      <span class="icon-video">
        <svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
          <path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
          <path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
        </svg>
      </span>
    </button>
                    <div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-FS-3" aria-hidden="false">
                        <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
                            <div class="iastate22-modal__container iastate22-modal__container-with-media" id="Video-Modal-FS-3-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FS-3-title">
                                <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
                                <div class="iastate22-modal__media">
                                    <div class="video-embed">
                                        <div class="video-embed__media-wrap">
                                            <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
                                            <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
                                        </div>
                                        <div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                                            aliquip ex ea commodo consequat.</div>
                                    </div>
                                </div>
                                <div class="iastate22-modal__content">
                                    <h2 class="iastate22-modal__title" id="Video-Modal-FS-3-title">Video Modal</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </li>
    </ul>
</div>
 
<div class="callout-set">
  <ul>
    {% for callout in callouts %}
    <li>
        {% include "@feature--video" with callout %}
    </li>
    {% endfor %}
  </ul>
</div>
 
{
  "callouts": [
    {
      "image": "../../img/Component-Featured-Image-Small_FPO.jpg",
      "title": "Feature Title Lorem Ipsum Dolor",
      "body_copy": "<p>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.</p>",
      "button": {
        "text": "Link Lorem Ipsum Dolor",
        "modal": {
          "id": "Video-Modal-FS-1",
          "title": "Video Modal",
          "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
          "video": {
            "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
            "source": "youtube",
            "title": "Your future starts now.",
            "youtube_video_id": "LjOmcZkXVcU",
            "vimeo_video_id": ""
          }
        }
      }
    },
    {
      "image": "../../img/Component-Featured-Image-Small_FPO-2.jpg",
      "title": "Feature Title Lorem Ipsum Dolor",
      "body_copy": "<p>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.</p>",
      "button": {
        "text": "Link Lorem Ipsum Dolor",
        "modal": {
          "id": "Video-Modal-FS-2",
          "title": "Video Modal",
          "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
          "video": {
            "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
            "source": "youtube",
            "title": "Your future starts now.",
            "youtube_video_id": "LjOmcZkXVcU",
            "vimeo_video_id": ""
          }
        }
      }
    },
    {
      "image": "../../img/Component-Featured-Image-Small_FPO.jpg",
      "title": "Feature Title Lorem Ipsum Dolor",
      "body_copy": "<p>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.</p>",
      "button": {
        "text": "Link Lorem Ipsum Dolor",
        "modal": {
          "id": "Video-Modal-FS-3",
          "title": "Video Modal",
          "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
          "video": {
            "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
            "source": "youtube",
            "title": "Your future starts now.",
            "youtube_video_id": "LjOmcZkXVcU",
            "vimeo_video_id": ""
          }
        }
      }
    }
  ]
}
  • 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">.