Versions Compared

Old Version 26

changes.mady.by.user Erica McConnaughey

Saved on

compared with

New Version 27

changes.mady.by.user Erica McConnaughey

Saved on

Key

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

...

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-0mt-5">
		<div class="swiper-slide staggered-image-one image-one">
			<img decoding="async" class="image" src="" alt="" aria-desribedbydescribedby="staggered-collage-caption">
		</div>
		<div class="swiper-slide staggered-image-two image-two">
			<img decoding="async" class="image" src="" alt="" aria-desribedbydescribedby="staggered-collage-caption">
		</div>
		<div class="swiper-slide staggered-image-three image-three">
			<img decoding="async" class="image" src="" alt="" aria-desribedbydescribedby="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
languagehtml
titleStaggered Collage no caption
collapsetrue
	<div class="acf-block-image-collagestaggered-wrapper 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="" alt="">
		</div>
		<div class="swiper-slide staggered-image-two image-two">
			<img decoding="async" class="image" src="" alt="">
		</div>
		<div class="swiper-slide staggered-image-three image-three">
			<img decoding="async" class="image" src="" alt="">
		</div> 
 	</div>
</div>

...

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-desribedbydescribedby="mixed-collage-caption">
   </div>
   <div class="image-two">
      <img decoding="async" class="image brand-border-radius" src="" alt="" aria-desribedbydescribedby="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-desribedbydescribedby="mixed-collage-caption">
   </div> 
</div>

...