Component Library

Image Collage: Four Column 

<div class="image-collage--four-col">
    <div class="image-collage__wrap">
        <div class="image-collage__image-one">
            <img src="../../img/carousel-slide_fpo.jpg" alt="Image One">
        </div>
        <div class="image-collage__image-two">
            <img src="../../img/Component-Card-Image-3.jpg" alt="Image Two">
        </div>
        <div class="image-collage__image-three">
            <img src="../../img/Component-Card-Image-2.jpg" alt="Image Three">
        </div>
        <div class="image-collage__image-four">
            <img src="../../img/Component-Feature-Image-Small.jpg" alt="Image Four">
        </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--four-col">
  <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 class="image-collage__image-four">
      <img src="{{ image_four.src|path }}" alt="{{ image_four.alt }}">
    </div>
  </div>
  {% if caption %}<div class="image-collage__caption"><p>{{caption}}</p></div>{% endif %}
</div>
 
{
  "image_one": {
    "src": "../../img/carousel-slide_fpo.jpg",
    "alt": "Image One"
  },
  "image_two": {
    "src": "../../img/Component-Card-Image-3.jpg",
    "alt": "Image Two"
  },
  "image_three": {
    "src": "../../img/Component-Card-Image-2.jpg",
    "alt": "Image Three"
  },
  "caption": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
  "image_four": {
    "src": "../../img/Component-Feature-Image-Small.jpg",
    "alt": "Image Four"
  }
}
  • 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.