Component Library

Feature With Large Image: Video Embed 

<div class="feature-with-large-image">
    <div class="feature-with-large-image__media">
        <img src="../../img/feature_with_large_image.jpg" alt="" loading="lazy" width="1176" height="662">
    </div>
    <div class="feature-with-large-image__content">
        <h2>Feature with H2 and Large Image</h2>
        <div class="feature-with-large-image__text text-content">
            <p>Nemo enim ipsam voluptatem quia voluptas sit <a href="#">aspernatur</a> aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
        </div>
        <div class="iastate22-button-set">
            <ul>
                <li>
                    <button class="iastate22-button" data-micromodal-trigger=Video-Modal-FLI-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-FLI-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-FLI-2-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FLI-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-FLI-2-title">Video Modal</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="feature-with-large-image">
  <div class="feature-with-large-image__media">
    <img src="{{ image|path }}" alt="" loading="lazy" width="1176" height="662" >
  </div>
  <div class="feature-with-large-image__content">
    <h2>{{title}}</h2>
    <div class="feature-with-large-image__text text-content">{{text|raw}}</div>
    {% if button_set %}
      {% include "@button-set" with button_set %}
    {% endif %}
    {% if link_set %}
      {% include "@link-set" with link_set %}
    {% endif %}
  </div>
</div>
 
{
  "image": "../../img/feature_with_large_image.jpg",
  "title": "Feature with H2 and Large Image",
  "text": "<p>Nemo enim ipsam voluptatem quia voluptas sit <a href=\"#\">aspernatur</a> aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
  "button_set": {
    "items": [
      {
        "text": "Primary CTA Style",
        "video": {
          "text": "Link Lorem Ipsum Dolor",
          "modal": {
            "id": "Video-Modal-FLI-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": ""
            }
          }
        }
      }
    ]
  }
}
  • Content: 
    .paragraph-widget--feature-with-large-image {
  @extend %full-width-component;
  @include media-breakpoint-up(lg) {
    margin-top: rem(120);
  }
}

.feature-with-large-image {
  padding-left: rem(36);
  padding-right: rem(36);
  padding-bottom: rem(40);
  background-color: $off-white;
  border-top: rem(30) solid $iastate-red;
  box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
  @include media-breakpoint-up(sm) {
    position: relative;
    margin-left: rem(70);
    margin-right: rem(70);
  }
  @include media-breakpoint-up(lg) {
    background-color: $white;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    border-top: none;
    box-shadow: none;
  }
  h2 {
    margin: 0 0 rem(25);
    padding: 0;
  }
  .iastate22-button-set {
    margin-top: rem(25);
  }
  &:before {
    @include media-breakpoint-up(sm) {
      content: "";
      pointer-events: none;
      background-color: $iastate-red;
      position: absolute;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      height: 50%;
      top: rem(-30);
      max-height: rem(203);
    }
    @include media-breakpoint-up(lg) {
      top: rem(-60);
      max-height: rem(380);
      //   left: 0;
      //   right: 0;
      //   width: 100%;
      //   transform: none;
      // }
      // @include media-breakpoint-up(xxl) {
      //   width: 150vw;
      //   left: 50%;
      //   transform: translateX(-50%);
    }
  }
}

.feature-with-large-image__media {
  margin-left: rem(-36);
  margin-right: rem(-36);
  margin-bottom: rem(35);
  position: relative;
  @extend %responsive-img;
  @include media-breakpoint-up(lg) {
    width: 80%;
    margin: 0 0 0 auto;
    box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
  }

  &:before {
    content: " ";
    padding-top: 56.28%;
  }
  &:after {
    content: "";
    border-bottom: rem(8) solid $iastate-gold;
    bottom: rem(-4);
    left: 50%;
    margin-left: rem(-28);
    width: rem(56);
    height: rem(8);
    position: absolute;
    @include media-breakpoint-up(lg) {
      display: none;
    }
  }
}
.feature-with-large-image__content {
  @include media-breakpoint-up(lg) {
    position: absolute;
    width: 35%;
    background-color: $off-white;
    left: rem(40);
    top: 50%;
    transform: translateY(-50%);
    padding: rem(25) rem(45);
    box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
  }
  @include media-breakpoint-up(xl) {
    width: rem(520);
    left: rem(70);
    padding: rem(40) rem(90) rem(30);
  }

  &:after {
    @include media-breakpoint-up(lg) {
      content: "";
      border-bottom: rem(8) solid $iastate-gold;
      top: rem(-4);
      left: 50%;
      margin-left: rem(-28);
      width: rem(56);
      height: rem(8);
      position: absolute;
    }
  }
}
.feature-with-large-image__text {
  &:last-child {
    margin-bottom: 0;
    @include media-breakpoint-up(xl) {
      margin-bottom: rem(20);
    }
  }

  + .link-set {
    margin-top: rem(20);
  }
}
  • URL: /components/raw/feature-with-large-image/_feature-with-large-image.scss
  • Filesystem Path: src/components/feature-with-large-image/_feature-with-large-image.scss
  • Size: 3 KB

Feature With Large Image

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

  • Uses the button-set subcomponent
  • The custom styles are imported into the index.scss file as @import "../components/feature-with-large-image/feature-with-large-image";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--feature-with-large-image">.