Component Library

Feature With Small Image: Default 

<div class="callout-with-image">
    <div class="callout-with-image__media">
        <img src="../../img/Component-Feature-Image-Small.jpg" alt="" width="622" height="414" loading="lazy">
    </div>
    <div class="callout-with-image__content text-content">
        <h2>Heading 2 - This is a title of major section of a page</h2>
        <div>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
        </div>
        <a href="#" class="iastate22-button">Primary CTA Style<span class="arrow"></span></a> </div>
</div>
 
<div class="callout-with-image">
  <div class="callout-with-image__media">
    <img src="{{ image|path }}" alt="" width="622" height="414" loading="lazy" >
  </div>
  <div class="callout-with-image__content text-content">
    <h2>{{title}}</h2>
    <div>{{body_copy}}</div>
    {% if button %}
      {% include "@button" with button %}
    {% endif %}
    {% if link_set %}
      {% include "@link-set" with link_set %}
    {% endif %}
  </div>
</div>
 
{
  "image": "../../img/Component-Feature-Image-Small.jpg",
  "title": "Heading 2 - This is a title of major section of a page",
  "body_copy": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
  "button": {
    "text": "Primary CTA Style",
    "url": "#"
  }
}
  • Content: 
    .paragraph-widget--callout-with-image {
  margin-top: rem(53);
  margin-bottom: rem(53);

  .callout-with-image__media {
    margin-left: rem(-36);
    @include media-breakpoint-up(md) {
      margin-left: rem(-70);
    }
    @include media-breakpoint-up(xl) {
      margin-left: rem(-190);
    }
  }
}

.callout-with-image {
  @include media-breakpoint-up(md) {
    display: flex;
    align-items: flex-start;
  }
  @include media-breakpoint-up(lg) {
    align-items: center;
  }
}

.callout-with-image__media {
  @extend %responsive-img;
  margin-bottom: rem(30);
  &:before {
    padding-top: 66.67%;
  }
  @include media-breakpoint-up(md) {
    flex: 1 1 0px;
  }
  @include media-breakpoint-up(lg) {
    flex: 0 1 auto;
    width: 70%;
  }
  .callout-with-image--small & {
    margin-bottom: rem(17);
    @include media-breakpoint-up(lg) {
      width: 60%;
    }
    &:before {
      padding-top: 57.31%;
    }
  }
}

.callout-with-image__content {
  @include media-breakpoint-up(md) {
    flex: 1 1 0px;
    padding-left: rem(45);
  }
  @include media-breakpoint-up(lg) {
    padding-left: rem(90);
    flex: 0 1 auto;
    width: 60%;
  }
  .iastate22-button {
    margin-top: rem(22);
  }
  p {
    .callout-with-image--small & {
      margin-top: rem(20);
    }
  }
}

.callout-with-image__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 rem(20);
}
  • URL: /components/raw/feature-with-small-image/_feature-with-small-image.scss
  • Filesystem Path: src/components/feature-with-small-image/_feature-with-small-image.scss
  • Size: 1.4 KB

Feature with Small Image

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

  • The component supports one button, plus an optional link set (the example does not show the link set, but the secondary links are recommended if multiple links are needed)
  • The custom styles are imported into the index.scss file as @import "../components/feature-with-small-image/feature-with-small-image";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--callout-with-image">.