Image Lightbox

WARNING

TODO: example doesn't work yet

.lightbox

I'm a cool image, casually floating on the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?

html

<div class="image-wrapper">
  <div class="image-wrapper__image -left">
      <img class="lightbox" src="/public/resources/images/home/phip.png" style="width: 400px;" alt="meaningful description of the image" loading="lazy" />
    <div class="image-wrapper__caption">
      I'm a cool image, casually floating on the left
    </div>
  </div>
  <div class="image-wrapper__text">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?
    </p>
  </div>
</div>

Atoms

Molecules

Organisms

Templates

Pages

Logger

Image Lightbox ​