Component Library

Feature With Large Image And Intro: Default 

<div class="callout-inset">
    <div class="callout-inset_inset">
        <h2 class="callout-inset_inset-headline">Inset Call Out with H2</h2>
        <div class="text-content">
            <p>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.</p>
        </div>
    </div>
    <div class="feature-with-large-image">
        <div class="feature-with-large-image__media">
            <img src="../../img/Feature-Image-Inset-Large_FPO.jpg" alt="" loading="lazy" width="1176" height="662">
        </div>
        <div class="feature-with-large-image__content">
            <h2>Inset Feature with H2 and Large Image</h2>
            <div class="feature-with-large-image__text text-content">
                <p>Nemo enim ipsam voluptatem quia 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>
 
<div class="callout-inset">
  <div class="callout-inset_inset">
    <h2 class="callout-inset_inset-headline">{{title}}</h2>
    <div class="text-content">{{intro_text|raw}}</div>
  </div>
  {% include "@feature-with-large-image" with feature_with_large_image %}
</div>
 
{
  "title": "Inset Call Out with H2",
  "intro_text": "<p>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.</p>",
  "feature_with_large_image": {
    "image": "../../img/Feature-Image-Inset-Large_FPO.jpg",
    "title": "Inset 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",
          "url": "https://iastate.edu"
        }
      ]
    }
  }
}
  • Content: 
    .paragraph-widget--callout-inset {
  @extend %full-width-component;
  @include media-breakpoint-up(lg) {
    margin-top: rem(120);
  }
}

.callout-inset {
  position: relative;
  .feature-with-large-image {
    z-index: 1;
    border-top-color: $off-white;
    background-color: $iastate-red;
    @include media-breakpoint-up(sm) {
      border-top: none;
    }
    @include media-breakpoint-up(lg) {
      background-color: transparent;
    }
    &:before {
      display: none;
    }
    &:after {
      @include media-breakpoint-up(lg) {
        content: "";
        position: absolute;
        background-color: $white;
        top: 50%;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
      }
    }
  }
  .feature-with-large-image__content {
    @include media-breakpoint-up(lg) {
      background-color: $iastate-red;
    }

    h2,
    .feature-with-large-image__text {
      color: $white;
    }

    .feature-with-large-image__text {
      p {
        font-family: $typeface-sans-serif;
        font-weight: 700;
      }

      &.text-content p > a:not(.iastate22-link-secondary):not(.iastate22-link-external):not(.link-tertiary) {
        color: $white;
        transition: text-decoration-color 0.3s ease-in-out, color 0.3s ease-in-out;

        &:hover,
        &:focus {
          color: $iastate-gold;
          // text-decoration-color: transparent;
        }
      }
    }
  }
  .iastate22-button {
    @extend %iastate22-button--reverse;
  }
  // off-white color in background
  &:after {
    @include media-breakpoint-up(sm) {
      content: "";
      position: absolute;
      background-color: $off-white;
      top: 0;
      left: 0;
      bottom: 50%;
      right: 0;
    }
    @include media-breakpoint-up(lg) {
      left: rem(100);
      right: 50%;
      z-index: 0;
      bottom: 0;
    }
    @include media-breakpoint-up(xl) {
      left: rem(190);
    }
  }
}

.callout-inset_inset {
  background-color: $off-white;
  padding: rem(60) rem(36);
  position: relative;
  z-index: 1;
  @include media-breakpoint-up(sm) {
    text-align: center;
    padding-left: rem(108);
    padding-right: rem(108);
  }
  @include media-breakpoint-up(lg) {
    margin-right: rem(100);
    margin-left: rem(100);
    padding: rem(60) rem(70) rem(80);
  }
  @include media-breakpoint-up(xl) {
    margin-right: rem(190);
    margin-left: rem(190);
    padding: rem(60) rem(114) rem(107);
  }
  p {
    line-height: (29 / 18);
    @include media-breakpoint-up(md) {
      line-height: (26 / 16);
    }
  }
  .text-content {
    ul,
    ol {
      text-align: left;
    }
    &:last-child {
      margin-bottom: 0;
      @include media-breakpoint-up(xl) {
        margin-bottom: 0;
      }
    }
  }
}

.callout-inset_inset-headline {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    border-bottom: rem(2) solid $iastate-gold;
    left: 50%;
    margin-left: rem(-25);
    width: rem(50);
    bottom: 0;
  }
}
  • URL: /components/raw/feature-with-large-image-and-intro/_feature-with-large-image-and-intro.scss
  • Filesystem Path: src/components/feature-with-large-image-and-intro/_feature-with-large-image-and-intro.scss
  • Size: 3 KB

Feature with Large Image and Intro

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

  • Component contains heading and intro text, as well as the nested component feature-with-large-image (with some style variations)
  • The custom styles are imported into the index.scss file as @import "../components/feature-with-large-image-and-intro/feature-with-large-image-and-intro";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--callout-inset">.