@ulu/frontend/lib/scss/components/_captioned-figure.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Traditional Layout
  description: A traditional figure layout with the caption appearing below the image.
-->
<figure class="captioned-figure captioned-figure--traditional">
  <img src="https://picsum.photos/id/1018/600/400" alt="Landscape photo">
  <figcaption class="captioned-figure__caption">
    A beautiful landscape captured during sunset.
  </figcaption>
</figure>

<!-- @ulu-demo
  title: Bottom-Right Overlay
  description: The caption is overlaid on the bottom-right of the image using absolute positioning.
-->
<figure class="captioned-figure captioned-figure--bottom captioned-figure--right">
  <img src="https://picsum.photos/id/1015/600/400" alt="Landscape photo">
  <figcaption class="captioned-figure__caption">
    Overlay Caption
  </figcaption>
</figure>

<!-- @ulu-demo
  title: Bottom-Center Overlay
  description: The caption is centered at the bottom of the image.
-->
<figure class="captioned-figure captioned-figure--bottom captioned-figure--center">
  <img src="https://picsum.photos/id/1016/600/400" alt="Landscape photo">
  <figcaption class="captioned-figure__caption">
    Centered Overlay
  </figcaption>
</figure>