Component Library

Image Grid With Text 

<div class="image-grid-with-text">
    <div class="image-grid-with-text__content text-content">
        <h2>Image Grid with H2 Title and CTA</h2>
        <div>
            <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. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="iastate22-button-set">
            <ul>
                <li>
                    <a class="iastate22-button" href="https://iastate.edu">Primary CTA Styles<span class="arrow"></span></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="image-grid">
        <div class="image-grid__image">
            <img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" width="627" height="418" loading="lazy">
        </div>
        <div class="image-grid__image">
            <img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" width="303" height="202" loading="lazy">
        </div>
        <div class="image-grid__image">
            <img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" width="303" height="202" loading="lazy">
        </div>
        <div class="image-grid__caption">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
        </div>
    </div>
</div>
 
<div class="image-grid-with-text">
  <div class="image-grid-with-text__content text-content">
    <h2>{{title}}</h2>
    <div>{{copy|raw}}</div>
    {% include "@button-set" with button_set %}
  </div>
  {% include "@image-grid" with image_grid %}
</div>
 
{
  "title": "Image Grid with H2 Title and CTA",
  "copy": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
  "image_grid": {
    "image_one": "../../img/IMG-Campus-Location-Large-Image.jpg",
    "image_two": "../../img/IMG-Campus-Location-Large-Image.jpg",
    "image_three": "../../img/IMG-Campus-Location-Large-Image.jpg",
    "caption": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
  },
  "button_set": {
    "items": [
      {
        "text": "Primary CTA Styles",
        "url": "https://iastate.edu"
      }
    ]
  }
}
  • Content: 
    // image on desktop needs to be pull 216px out to the right
.image-grid-with-text {
  @include media-breakpoint-up(lg) {
    display: flex;
  }
}

.image-grid-with-text__content,
.image-grid {
  @include media-breakpoint-up(lg) {
    flex: 0 1 auto;
    width: 50%;
  }
}

.image-grid-with-text__content {
  margin-bottom: rem(35);
  @include media-breakpoint-up(lg) {
    padding-right: rem(50);
  }
}

.image-grid {
  @include media-breakpoint-up(lg) {
    margin-right: rem(-108);
    width: 60%;
    padding-left: rem(50);
  }
  @include media-breakpoint-up(xl) {
    margin-right: rem(-216);
    width: 70%;
  }
}
  • URL: /components/raw/image-grid-with-text/_image-grid-with-text.scss
  • Filesystem Path: src/components/image-grid-with-text/_image-grid-with-text.scss
  • Size: 619 Bytes

Image Grid With Text

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

  • This is a companion to the component called image-grid which outputs the image grid with room for a headline, text, and button - this should typically be used for output globally
  • Contains subcomponents button-set and image-grid
  • This is setup to use raw html for the body section under the healine (tables may be added to this section and will display properly)
  • The custom styles are imported into the index.scss file as @import "../components/image-grid-with-text/image-grid-with-text";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--image-grid-with-text">.