Component Library

Image Grid 

<figure 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>
    <figcaption class="image-grid__caption">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
    </figcaption>
</figure>
 
<figure class="image-grid">
  <div class="image-grid__image">
    <img src="{{ image_one|path }}" alt="" width="627" height="418" loading="lazy">
  </div>
  <div class="image-grid__image">
    <img src="{{ image_two|path }}" alt="" width="303" height="202" loading="lazy">
  </div>
  <div class="image-grid__image">
    <img src="{{ image_three|path }}" alt="" width="303" height="202" loading="lazy">
  </div>
  {% if caption %}<figcaption class="image-grid__caption"><p>{{caption}}</p></figcaption>{% endif %}
</figure>
 
{
  "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"
}
  • Content: 
    .image-grid {
  @include media-breakpoint-up(md) {
    display: flex;
    flex-wrap: wrap;
  }
}

.image-grid__image {
  @extend %responsive-img;
  margin-bottom: rem(20);
  @include media-breakpoint-up(md) {
    flex: 0 1 auto;
    width: 100%;
  }
  &:before {
    padding-top: 66.67%;
  }
  img {
    width: 100%;
  }

  &:nth-child(2),
  &:nth-child(3) {
    @include media-breakpoint-up(md) {
      width: calc(50% - #{rem(10)});
      margin-bottom: 0;
    }
  }
  &:nth-child(2) {
    @include media-breakpoint-up(md) {
      margin-right: rem(10);
    }
  }
  &:nth-child(3) {
    @include media-breakpoint-up(md) {
      margin-left: rem(10);
    }
  }
}

.image-grid__caption {
  @extend %caption;
  @include media-breakpoint-up(md) {
    flex: 0 1 auto;
    width: 100%;
  }
  @include media-breakpoint-up(lg) {
    padding-right: rem(30);
  }
  @include media-breakpoint-up(xl) {
    padding-right: 0;
  }
}
  • URL: /components/raw/image-grid/_image-grid.scss
  • Filesystem Path: src/components/image-grid/_image-grid.scss
  • Size: 920 Bytes

Image Grid

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

  • Images within the image-grid__image element will be inline img elements and are sized using the css object-fit property (a polyfill is included for older browsers)
  • Contains room for 3 images and an optional caption
  • There is a companion component associated called image-grid-with-text which outputs the image grid with room for a headline, text, and button - this should typically be used for output globally
  • The custom styles are imported into the index.scss file as @import "../components/image-grid/image-grid";