diff --git a/src/index.html b/src/index.html
index 4356517b..ffa93656 100644
--- a/src/index.html
+++ b/src/index.html
@@ -82,21 +82,70 @@ <h1 class="text-subtitle text-white">JPL Design System Assets</h1>
       <h2
         class="text-subtitle text-gray-dark pb-4 border-b border-gray-mid my-10"
       >
-        BaseImage and BaseImagePlaceholder
+        BlockImage
       </h2>
       <div class="lg:w-1/2 mx-auto">
-        <div>
-          <div class="BaseImagePlaceholder aspect-ratio-twelve-nine dark-theme">
-            <div>
-              <img
-                data-src="https://picsum.photos/1200/900"
-                data-srcset="https://picsum.photos/1200/900 1200w,"
-                alt="alt text for image"
-                loading="lazy"
-                class="BaseImage object-contain lazyload"
-                width="1200"
-                height="900"
-              />
+        <div class="group relative">
+          <div
+            class="lg:opacity-0 transition-opacity absolute z-20 top-0 right-0 can-hover:group-hover:opacity-100 focus-within:opacity-100"
+          >
+            <button
+              class="BaseButton text-contrast-none inline-block -primary -icon-only"
+              aria-label="View in lightbox"
+              data-fancybox
+              data-caption="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>Credit: NASA/JPL"
+              data-src="https://placekitten.com/869/700"
+            >
+              <span class="label block">
+                <svg
+                  class="IconExpand"
+                  width="60"
+                  height="60"
+                  viewBox="0 0 60 60"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  focusable="false"
+                >
+                  <path
+                    d="M48 37v11H37v-2h9v-9h2zm-34 0v9h9v2H12V37h2zm9-25v2h-9v9h-2V12h11zm25 0v11h-2v-9h-9v-2h11z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+
+          <div>
+            <div
+              class="BaseImagePlaceholder dark-theme aspect-ratio-sixteen-nine"
+            >
+              <div>
+                <img
+                  class="BaseImage object-contain lazyload"
+                  data-src="https://placekitten.com/869/700"
+                  data-srcset="https://placekitten.com/869/700"
+                  alt="Fourth image"
+                  width="869"
+                  height="700"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="lg:px-0 p-4 pb-0">
+          <div class="BaseImageCaption text-body-sm">
+            <div class="inline mr-2">
+              <div class="the-caption-text inline">
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  vel porttitor urna. Maecenas at est laoreet, sagittis risus a,
+                  rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis
+                  felis scelerisque sit amet.
+                </p>
+              </div>
+              <span class="inline"> Credit: NASA/JPL </span>
             </div>
           </div>
         </div>
@@ -107,160 +156,300 @@ <h1 class="text-subtitle text-white">JPL Design System Assets</h1>
       >
         BlockImageCarousel
       </h2>
+      <div class="container mx-auto">
+        <div class="BlockImageCarousel w-full overflow-hidden">
+          <div class="swiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <div class="group relative">
+                  <div
+                    class="lg:opacity-0 transition-opacity absolute z-20 top-0 right-0 can-hover:group-hover:opacity-100 focus-within:opacity-100"
+                  >
+                    <button
+                      class="BaseButton text-contrast-none inline-block -primary -icon-only"
+                      aria-label="View in lightbox"
+                      data-fancybox="ImageGalleryName"
+                      data-caption="Lorem ipsum dolor sit amet.Credit: NASA/JPL-Caltech"
+                      data-src="https://picsum.photos/1024/576"
+                    >
+                      <span class="label block">
+                        <svg
+                          class="IconExpand"
+                          width="60"
+                          height="60"
+                          viewBox="0 0 60 60"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                          focusable="false"
+                        >
+                          <path
+                            d="M48 37v11H37v-2h9v-9h2zm-34 0v9h9v2H12V37h2zm9-25v2h-9v9h-2V12h11zm25 0v11h-2v-9h-9v-2h11z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          ></path>
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
 
-      <div class="BlockImageCarousel w-full overflow-hidden">
-        <div class="swiper">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <div>
-                <div
-                  class="BaseImagePlaceholder aspect-ratio-sixteen-nine dark-theme"
-                >
                   <div>
-                    <img
-                      data-src="https://placekitten.com/869/700"
-                      data-srcset="https://placekitten.com/320/258 320w, https://placekitten.com/869/700 1024w"
-                      alt="Fourth image"
-                      loading="lazy"
-                      class="BaseImage object-contain lazyload"
-                      width="869"
-                      height="700"
-                    />
+                    <div
+                      class="BaseImagePlaceholder dark-theme aspect-ratio-sixteen-nine"
+                    >
+                      <div>
+                        <img
+                          class="BaseImage swiper-lazy object-contain lazyload"
+                          data-src="https://picsum.photos/1024/576"
+                          data-srcset="https://picsum.photos/1024/576"
+                          alt="First image"
+                          loading="lazy"
+                          width="1024"
+                          height="576"
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="lg:px-0 p-4 pb-0">
-                <div class="BaseImageCaption text-body-sm">
-                  <div class="inline mr-2">
-                    <div class="the-caption-text inline">
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Sed vel porttitor urna. Maecenas at est laoreet,
-                        sagittis risus a, rutrum ipsum. Quisque tincidunt lacus
-                        nunc, dapibus facilisis felis scelerisque sit amet.
-                      </p>
+                <div class="lg:px-0 lg:pt-3 px-4 pt-10">
+                  <div class="BaseImageCaption text-body-sm">
+                    <div class="inline mr-2">
+                      <div class="the-caption-text inline">
+                        Lorem ipsum dolor sit amet.
+                      </div>
+                      <span class="inline">Credit: NASA/JPL-Caltech</span>
                     </div>
-                    <span class="inline">Credit: NASA/JPL</span>
-                  </div>
-                  <div class="inline-block">
-                    <a
-                      href="#"
-                      class="group -default underline text-theme-red can-hover:hover:text-theme-red-hover cursor-pointer"
-                    >
-                      Full Image Details
-                    </a>
                   </div>
                 </div>
+                <div class="pt-10 lg:hidden"></div>
               </div>
-            </div>
+              <div class="swiper-slide">
+                <div class="group relative">
+                  <div
+                    class="lg:opacity-0 transition-opacity absolute z-20 top-0 right-0 can-hover:group-hover:opacity-100 focus-within:opacity-100"
+                  >
+                    <button
+                      class="BaseButton text-contrast-none inline-block -primary -icon-only"
+                      aria-label="View in lightbox"
+                      data-fancybox="ImageGalleryName"
+                      data-src="https://picsum.photos/1024/448"
+                    >
+                      <span class="label block">
+                        <svg
+                          class="IconExpand"
+                          width="60"
+                          height="60"
+                          viewBox="0 0 60 60"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                          focusable="false"
+                        >
+                          <path
+                            d="M48 37v11H37v-2h9v-9h2zm-34 0v9h9v2H12V37h2zm9-25v2h-9v9h-2V12h11zm25 0v11h-2v-9h-9v-2h11z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          ></path>
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
 
-            <div class="swiper-slide">
-              <div>
-                <div
-                  class="BaseImagePlaceholder aspect-ratio-sixteen-nine dark-theme"
-                >
                   <div>
-                    <img
-                      data-src="https://placekitten.com/1600/900"
-                      alt="cat"
-                      loading="lazy"
-                      class="BaseImage object-contain lazyload"
-                      width="869"
-                      height="700"
-                    />
+                    <div
+                      class="BaseImagePlaceholder dark-theme aspect-ratio-sixteen-nine"
+                    >
+                      <div>
+                        <img
+                          class="BaseImage swiper-lazy object-contain lazyload"
+                          data-src="https://picsum.photos/1024/448"
+                          data-srcset="https://picsum.photos/1024/448"
+                          alt="Second image"
+                          loading="lazy"
+                          width="1024"
+                          height="448"
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
+
+                <div class="pt-10 lg:hidden"></div>
               </div>
-            </div>
+              <div class="swiper-slide">
+                <div class="group relative">
+                  <div
+                    class="lg:opacity-0 transition-opacity absolute z-20 top-0 right-0 can-hover:group-hover:opacity-100 focus-within:opacity-100"
+                  >
+                    <button
+                      class="BaseButton text-contrast-none inline-block -primary -icon-only"
+                      aria-label="View in lightbox"
+                      data-fancybox="ImageGalleryName"
+                      data-caption="Credit: NASA/JPL"
+                      data-src="https://picsum.photos/400/800"
+                    >
+                      <span class="label block">
+                        <svg
+                          class="IconExpand"
+                          width="60"
+                          height="60"
+                          viewBox="0 0 60 60"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                          focusable="false"
+                        >
+                          <path
+                            d="M48 37v11H37v-2h9v-9h2zm-34 0v9h9v2H12V37h2zm9-25v2h-9v9h-2V12h11zm25 0v11h-2v-9h-9v-2h11z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          ></path>
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
 
-            <div class="swiper-slide">
-              <div>
-                <div
-                  class="BaseImagePlaceholder aspect-ratio-sixteen-nine dark-theme"
-                >
                   <div>
-                    <img
-                      data-src="https://placekitten.com/869/700"
-                      data-srcset="https://placekitten.com/320/258 320w, https://placekitten.com/869/700 1024w"
-                      alt="Fourth image"
-                      loading="lazy"
-                      class="BaseImage object-contain lazyload"
-                      width="869"
-                      height="700"
-                    />
+                    <div
+                      class="BaseImagePlaceholder dark-theme aspect-ratio-sixteen-nine"
+                    >
+                      <div>
+                        <img
+                          class="BaseImage swiper-lazy object-contain lazyload"
+                          data-src="https://picsum.photos/400/800"
+                          data-srcset="https://picsum.photos/400/800"
+                          alt="Third image"
+                          loading="lazy"
+                          width="400"
+                          height="800"
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="lg:px-0 p-4 pb-0">
-                <div class="BaseImageCaption text-body-sm">
-                  <div class="inline mr-2">
-                    <div class="the-caption-text inline">
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Sed vel porttitor urna. Maecenas at est laoreet,
-                        sagittis risus a, rutrum ipsum. Quisque tincidunt lacus
-                        nunc, dapibus facilisis felis scelerisque sit amet.
-                      </p>
+                <div class="lg:px-0 lg:pt-3 px-4 pt-10">
+                  <div class="BaseImageCaption text-body-sm">
+                    <div class="inline mr-2">
+                      <div class="the-caption-text inline"></div>
+                      <span class="inline">Credit: NASA/JPL</span>
                     </div>
-                    <span class="inline">Credit: NASA/JPL</span>
                   </div>
-                  <div class="inline-block">
-                    <a
-                      href="#"
-                      class="group -default underline text-theme-red can-hover:hover:text-theme-red-hover cursor-pointer"
+                </div>
+                <div class="pt-10 lg:hidden"></div>
+              </div>
+              <div class="swiper-slide">
+                <div class="group relative">
+                  <div
+                    class="lg:opacity-0 transition-opacity absolute z-20 top-0 right-0 can-hover:group-hover:opacity-100 focus-within:opacity-100"
+                  >
+                    <button
+                      class="BaseButton text-contrast-none inline-block -primary -icon-only"
+                      aria-label="View in lightbox"
+                      data-fancybox="ImageGalleryName"
+                      data-caption="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>Credit: NASA/JPL"
+                      data-src="https://picsum.photos/869/700"
                     >
-                      Full Image Details
-                    </a>
+                      <span class="label block">
+                        <svg
+                          class="IconExpand"
+                          width="60"
+                          height="60"
+                          viewBox="0 0 60 60"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                          focusable="false"
+                        >
+                          <path
+                            d="M48 37v11H37v-2h9v-9h2zm-34 0v9h9v2H12V37h2zm9-25v2h-9v9h-2V12h11zm25 0v11h-2v-9h-9v-2h11z"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                          ></path>
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+
+                  <div>
+                    <div
+                      class="BaseImagePlaceholder dark-theme aspect-ratio-sixteen-nine"
+                    >
+                      <div>
+                        <img
+                          class="BaseImage swiper-lazy object-contain lazyload"
+                          data-src="https://picsum.photos/869/700"
+                          data-srcset="https://picsum.photos/869/700"
+                          alt="Fourth image"
+                          loading="lazy"
+                          width="869"
+                          height="700"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="lg:px-0 lg:pt-3 px-4 pt-10">
+                  <div class="BaseImageCaption text-body-sm">
+                    <div class="inline mr-2">
+                      <div class="the-caption-text inline">
+                        <p>
+                          Lorem ipsum dolor sit amet, consectetur adipiscing
+                          elit. Sed vel porttitor urna. Maecenas at est laoreet,
+                          sagittis risus a, rutrum ipsum. Quisque tincidunt
+                          lacus nunc, dapibus facilisis felis scelerisque sit
+                          amet.
+                        </p>
+                      </div>
+                      <span class="inline">Credit: NASA/JPL</span>
+                    </div>
                   </div>
                 </div>
+                <div class="pt-10 lg:hidden"></div>
               </div>
             </div>
-          </div>
-          <div
-            class="swiper-nav lg:block absolute inset-x-0 top-0 hidden h-0 overflow-hidden"
-          >
-            <div class="absolute inset-0">
-              <div class="absolute bottom-0 right-0 z-10 flex">
-                <button
-                  aria-label="Previous slide"
-                  class="BaseButton text-contrast-none swiper-prev xl:text-xl border-collapse -primary -icon-only inline-block"
-                >
-                  <span class="label block">
-                    <svg viewBox="0 0 50 50" class="IconPrev">
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M29 13.686l1.414 1.415-9.9 9.899 9.9 9.9L29 36.313 17.686 25 29 13.686z"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        focusable="false"
-                      ></path>
-                    </svg>
-                  </span>
-                </button>
-                <button
-                  aria-label="Next slide"
-                  class="BaseButton text-contrast-none swiper-next xl:text-xl border-collapse -primary -icon-only inline-block"
-                >
-                  <span class="label block">
-                    <svg viewBox="0 0 50 50" class="IconNext">
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M21 36.314l-1.414-1.415 9.9-9.899-9.9-9.9L21 13.687 32.314 25 21 36.314z"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        focusable="false"
-                      ></path>
-                    </svg>
-                  </span>
-                </button>
+            <div
+              class="swiper-nav lg:block absolute inset-x-0 top-0 hidden h-0 overflow-hidden"
+            >
+              <div class="absolute inset-0">
+                <div class="absolute bottom-0 right-0 z-10 flex">
+                  <button
+                    class="BaseButton text-contrast-none inline-block -primary z-10 border-collapse px-1 py-2 swiper-prev xl:text-xl -icon-only"
+                    aria-label="Previous slide"
+                  >
+                    <span class="label block">
+                      <svg viewBox="0 0 50 50" class="IconPrev">
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M29 13.686l1.414 1.415-9.9 9.899 9.9 9.9L29 36.313 17.686 25 29 13.686z"
+                          fill="currentColor"
+                          aria-hidden="true"
+                          focusable="false"
+                        ></path>
+                      </svg>
+                    </span>
+                  </button>
+
+                  <button
+                    class="BaseButton text-contrast-none inline-block -primary z-10 border-collapse px-1 py-2 swiper-next xl:text-xl -icon-only"
+                    aria-label="Next slide"
+                  >
+                    <span class="label block">
+                      <svg viewBox="0 0 50 50" class="IconNext">
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M21 36.314l-1.414-1.415 9.9-9.899-9.9-9.9L21 13.687 32.314 25 21 36.314z"
+                          fill="currentColor"
+                          aria-hidden="true"
+                          focusable="false"
+                        ></path>
+                      </svg>
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
+            <div
+              class="swiper-pagination swiper-dots lg:hidden absolute top-0 w-full text-center"
+            ></div>
           </div>
-          <div
-            class="swiper-pagination swiper-dots lg:hidden absolute top-0 w-full text-center"
-          ></div>
         </div>
       </div>
 
diff --git a/storybook/stories/components/BaseImageCaption/BaseImageCaption.stories.js b/storybook/stories/components/BaseImageCaption/BaseImageCaption.stories.js
index f36d1ee0..5545ddd0 100644
--- a/storybook/stories/components/BaseImageCaption/BaseImageCaption.stories.js
+++ b/storybook/stories/components/BaseImageCaption/BaseImageCaption.stories.js
@@ -6,10 +6,12 @@ export default {
   argTypes: {
     caption: {
       type: { name: 'string', required: true },
+      description: 'Accepts rich text and plain text.',
     },
     credit: {
       type: { name: 'string', required: false },
-      description: 'Optional credit information',
+      description:
+        'Optional credit information. Limited rich text accepted (text styles and links only, no line or paragraph breaks).',
     },
     url: {
       type: { name: 'string', required: false },
diff --git a/storybook/stories/components/BlockImage/BlockImageLightbox.js b/storybook/stories/components/BlockImage/BlockImageLightbox.js
index 4858c702..b14ede31 100644
--- a/storybook/stories/components/BlockImage/BlockImageLightbox.js
+++ b/storybook/stories/components/BlockImage/BlockImageLightbox.js
@@ -1,10 +1,10 @@
 import { FancyboxButtonTemplate } from '../FancyboxButton/FancyboxButton'
 
-export const BlockImageLightboxTemplate = (image, fancyboxGallery) => {
+export const BlockImageLightboxTemplate = ({ image, fancyboxGallery }) => {
   let fancyboxButton = FancyboxButtonTemplate({
     variant: 'primary',
     fancyboxGallery,
-    image: image.image,
+    image: image,
     icon: 'expand',
     label: 'View in lightbox',
   })
diff --git a/storybook/stories/components/BlockImageCarousel/BlockImageCarousel.js b/storybook/stories/components/BlockImageCarousel/BlockImageCarousel.js
index 18bb4552..e4999b7c 100644
--- a/storybook/stories/components/BlockImageCarousel/BlockImageCarousel.js
+++ b/storybook/stories/components/BlockImageCarousel/BlockImageCarousel.js
@@ -15,7 +15,7 @@ export const BlockImageCarouselTemplate = ({
         imageClass: 'swiper-lazy',
         imageCaptionClass: 'slide-caption',
         imageCaptionWrapperClass: 'lg:pt-3 px-4 pt-10',
-        fancyboxGallery,
+        fancyboxGallery: 'ImageGalleryName',
       })}</div>`
     }
   }
@@ -32,7 +32,7 @@ export const BlockImageCarouselTemplate = ({
                 label: galleryCoverImage.label,
                 title: galleryCoverImage.title,
                 description: galleryCoverImage.description,
-                fancyboxGallery,
+                fancyboxGallery: 'ImageGalleryName',
                 image: galleryCoverImage.image,
               })
             : ''
diff --git a/storybook/stories/components/FancyboxButton/FancyboxButton.js b/storybook/stories/components/FancyboxButton/FancyboxButton.js
index 9441f6de..e7916f19 100644
--- a/storybook/stories/components/FancyboxButton/FancyboxButton.js
+++ b/storybook/stories/components/FancyboxButton/FancyboxButton.js
@@ -14,6 +14,7 @@ export const FancyboxButtonTemplate = ({
   if (image.credit || image.caption) {
     fancybox += ` data-caption="`
     if (image.caption) fancybox += image.caption
+    if (image.caption && image.credit) fancybox += ' '
     if (image.credit) fancybox += `Credit: ${image.credit}`
     fancybox += `"`
   }