Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Staggered collage (3 vertical photos)

Code Block
languagehtml
titleStaggered Collage w/caption
collapsetrue
<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
languagehtml
titleStaggered Collage no caption
collapsetrue
<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
languagehtml
titleMixed Collage w/caption
collapsetrue
<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
languagehtml
titleMixed Collage no caption
collapsetrue
<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>