...
Staggered collage (3 vertical photos)
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="acf-block-image-collage mt-5 mb-0">
<div class="staggered-wrapper mb-0 pb-0">
<div class="swiper-slide staggered-image-one image-one">
<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/ai-day-presentation-700x1050-1-683x1024.jpg" alt="A speaker points to a slide while presenting onstage at AI Day." aria-desribedby="collage-caption">
</div>
<div class="swiper-slide staggered-image-two image-two">
<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1665-700x1051-1-682x1024.jpg" alt="A man sits in front of a table and speaks into a microphone. There is a laptop and coffee thermos on the table." aria-desribedby="collage-caption">
</div>
<div class="swiper-slide staggered-image-three image-three">
<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1616-700x1050-1-683x1024.jpg" alt="A woman presents to an audience while holding a mic pack and a remote for advancing her slideshow." aria-desribedby="collage-caption">
</div>
<div class="caption" id="collage-caption">
<p class="mobile-caption mt-0">Mobile Caption</p>
<p class="desktop-caption mt-1 text-center">Desktop Caption</p>
</div>
</div>
</div> |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="acf-block-image-collage mt-5 mb-0">
<div class="staggered-wrapper mb-0 pb-0">
<div class="swiper-slide staggered-image-one image-one">
<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/ai-day-presentation-700x1050-1-683x1024.jpg" alt="A speaker points to a slide while presenting onstage at AI Day.">
</div>
<div class="swiper-slide staggered-image-two image-two">
<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1665-700x1051-1-682x1024.jpg" alt="A man sits in front of a table and speaks into a microphone. There is a laptop and coffee thermos on the table.">
</div>
<div class="swiper-slide staggered-image-three image-three">
<img decoding="async" class="image" src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2025/04/Generative-AI-Workshop_022024_DSC_1616-700x1050-1-683x1024.jpg" alt="A woman presents to an audience while holding a mic pack and a remote for advancing her slideshow.">
</div>
</div>
</div> |
Mixed collage (3 photos, 2 horizontal and 1 vertical)
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="mixed-layout-collage">
<div class="image-one">
<img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="collage-caption">
</div>
<div class="image-two">
<img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="collage-caption">
</div>
<div class="caption" id="collage-caption">
<p class="mobile-caption pt-2">Mobile Caption</p>
<p class="desktop-caption text-end">Desktop Caption</p>
</div>
<div class="image-three">
<img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="collage-caption">
</div>
</div> |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="mixed-layout-collage">
<div class="image-one">
<img decoding="async" class="image brand-border-radius" src="" alt="">
</div>
<div class="image-two">
<img decoding="async" class="image brand-border-radius" src="" alt="">
</div>
<div class="image-three">
<img decoding="async" class="image brand-border-radius" src="" alt="">
</div>
</div> |