...
Microtitle styles for subheads (with yellow triangle)
These styles can be used on any heading level.
| Code Block |
|---|
|
<h3 class="microtitle mb-3"><img class="microtitle-arrow" alt="" src="/wp-content/uploads/2024/10/Two-toned-yellow-arrow-digital-100x164-1.png" width="9" height="15" aria-hidden="true" /> Subheading</h3> |
...
| Code Block |
|---|
|
<hr class="hr-gray my-5" /> |
Pull quote
Can adjust or remove margin-y "my-4" class if needed.
| Code Block |
|---|
|
<figure class="wp-block-pullquote mx-0 my-4 text-start">
<p class="fs-5">add quote here</p>
</figure> |
Supporting Images
Staggered image collage  Image Modified
| Mixed image collage  Image Modified
|
|---|
Staggered collage (3 vertical photos)
- Photos must be vertical. Recommended size: 700x1000px
- Image two and three are hidden for mobile screens.
- Can use a single caption for all three images for desktop. A mobile caption for just image one, since the others are not visible at that breakpoint.
| Code Block |
|---|
| language | html |
|---|
| title | Staggered Collage w/caption |
|---|
| collapse | true |
|---|
|
<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="staggered-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="staggered-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="staggered-collage-caption">
</div>
<div class="caption" id="staggered-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 |
|---|
| language | html |
|---|
| title | Staggered Collage no caption |
|---|
| collapse | true |
|---|
|
<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)
- Image one and two must be horizontal, image three vertical.
- Image one and two size: 2400x1600px
- Image three size: 512x768px
- Image two and three are hidden for mobile screens.
- Can use a single caption for all three images for desktop. A mobile caption for just image one, since the others are not visible at that breakpoint.
| Code Block |
|---|
| language | html |
|---|
| title | Mixed Collage w/caption |
|---|
| collapse | true |
|---|
|
<div class="mixed-layout-collage">
<div class="image-one">
<img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="mixed-collage-caption">
</div>
<div class="image-two">
<img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedby="mixed-collage-caption">
</div>
<div class="caption" id="mixed-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="mixed-collage-caption">
</div>
</div> |
...
