Component Library

Image Collage 

<div class="image-collage">
    <div class="image-collage__wrap">
        <div class="image-collage__image-one">
            <img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="Image One">
        </div>
        <div class="image-collage__image-two">
            <img src="../../img/IMG_Inline_Left_FPO.jpg" alt="Image Two">
        </div>
        <div class="image-collage__image-three">
            <img src="../../img/IMG-Campus-Location-Small-Image-2@2x.png" alt="Image Three">
        </div>
    </div>
    <div class="image-collage__caption">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
    </div>
</div>
 
<div class="image-collage">
  <div class="image-collage__wrap">
    <div class="image-collage__image-one">
      <img src="{{ image_one.src|path }}" alt="{{ image_one.alt }}">
    </div>
    <div class="image-collage__image-two">
      <img src="{{ image_two.src|path }}" alt="{{ image_two.alt }}">
    </div>
    <div class="image-collage__image-three">
      <img src="{{ image_three.src|path }}" alt="{{ image_three.alt }}">
    </div>
  </div>
  {% if caption %}<div class="image-collage__caption"><p>{{caption}}</p></div>{% endif %}
</div>
 
{
  "image_one": {
    "src": "../../img/IMG-Campus-Location-Large-Image.jpg",
    "alt": "Image One"
  },
  "image_two": {
    "src": "../../img/IMG_Inline_Left_FPO.jpg",
    "alt": "Image Two"
  },
  "image_three": {
    "src": "../../img/IMG-Campus-Location-Small-Image-2@2x.png",
    "alt": "Image Three"
  },
  "caption": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
}
  • Content: 
    .image-collage {
}

.image-collage__wrap {
  display: flex;
  flex-direction: column;
  gap: rem(30);

  @include media-breakpoint-up("md") {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: rem(35);
  }

  .image-collage--four-col & {
    @include media-breakpoint-up("md") {
      grid-gap: rem(36) rem(32);
    }
  }

  .image-collage--five-col & {
    @include media-breakpoint-up("md") {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-gap: rem(36) rem(32);
    }
  }
}

[class^="image-collage__image"] {
  position: relative;

  &:before {
    content: "";
    display: block;
  }
}

[class^="image-collage__image"] > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-collage__image-one {
  @include media-breakpoint-up("md") {
    grid-column-start: 1;
    grid-column-end: 6;
  }
  &:before {
    padding-bottom: 65.25%;
  }

  .image-collage--four-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 1;
      grid-column-end: 4;
    }
    &:before {
      padding-bottom: 64.5%;
    }
  }

  .image-collage--five-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 1;
      grid-column-end: 4;
    }
    &:before {
      padding-bottom: 100%;
    }
  }
}

.image-collage__image-two {
  @include media-breakpoint-up("md") {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  &:before {
    padding-bottom: 100%;
  }

  .image-collage--four-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 4;
      grid-column-end: 6;
    }
  }

  .image-collage--five-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 4;
      grid-column-end: 9;
    }
    &:before {
      padding-bottom: 58%;
    }
  }
}

.image-collage__image-three {
  @include media-breakpoint-up("md") {
    grid-column-start: 3;
    grid-column-end: 6;
  }
  &:before {
    padding-bottom: 64.5%;
  }

  .image-collage--four-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    &:before {
      padding-bottom: 100%;
    }
  }

  .image-collage--five-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 1;
      grid-column-end: 6;
      grid-row-start: 2;
      grid-row-end: 4;
    }
    &:before {
      padding-bottom: 121%;
    }
  }
}

.image-collage__image-four {
  .image-collage--four-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 3;
      grid-column-end: 6;
    }

    &:before {
      padding-bottom: 64.5%;
    }
  }

  .image-collage--five-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 6;
      grid-column-end: 9;
      grid-row-start: 2;
      grid-row-end: 3;
    }
    &:before {
      padding-bottom: 100%;
    }
  }
}

.image-collage__image-five {
  .image-collage--five-col & {
    @include media-breakpoint-up("md") {
      grid-column-start: 6;
      grid-column-end: 9;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    &:before {
      padding-bottom: 100%;
    }
  }
}

.image-collage__caption {
  margin-top: rem(14);
  font-style: italic;
  font-size: 1rem;
  line-height: rem(26);
  color: $grey;
}
  • URL: /components/raw/image-collage/_image-collage.scss
  • Filesystem Path: src/components/image-collage/_image-collage.scss
  • Size: 3.3 KB

There are no notes for this item.