Component Library

Feature With Large Image 

<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 <a href="#">enim ipsam voluptatem quia</a> voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
        </div>
        <div class="iastate22-button-set">
            <ul>
                <li>
                    <a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
                </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>
    {% include "@button-set" with button_set %}
  </div>
</div>
 
{
  "image": "../../img/feature_with_large_image.jpg",
  "title": "Feature with H2 and Large Image",
  "text": "<p>Nemo <a href=\"#\">enim ipsam voluptatem quia</a> voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
  "button_set": {
    "items": [
      {
        "text": "Primary CTA Style",
        "url": "https://iastate.edu"
      }
    ]
  }
}
  • 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);
    }
  }
}
  • 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: 2.9 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">.