Vitreo
Components

Lightbox

A picture, large, with arrows to the next

Gallery

Select a picture.

Morning light
North studio
Quiet hours
Blue hour
Harbour walk
Paper trail
Code 
<div class="gallery" data-gallery>
  <figure class="gallery-item">
    <button type="button" class="gallery-open" aria-label="Open Morning light" data-index="0"><img class="pic" src="assets/images/placeholder.svg" alt="Morning light" loading="lazy"></button><figcaption>Morning light</figcaption>
  </figure>
  <figure class="gallery-item">
    <button type="button" class="gallery-open" aria-label="Open North studio" data-index="1"><img class="pic" src="assets/images/placeholder.svg" alt="North studio" loading="lazy"></button><figcaption>North studio</figcaption>
  </figure>
  <figure class="gallery-item">
    <button type="button" class="gallery-open" aria-label="Open Quiet hours" data-index="2"><img class="pic" src="assets/images/placeholder.svg" alt="Quiet hours" loading="lazy"></button><figcaption>Quiet hours</figcaption>
  </figure>
  <figure class="gallery-item">
    <button type="button" class="gallery-open" aria-label="Open Blue hour" data-index="3"><img class="pic" src="assets/images/placeholder.svg" alt="Blue hour" loading="lazy"></button><figcaption>Blue hour</figcaption>
  </figure>
  <figure class="gallery-item">
    <button type="button" class="gallery-open" aria-label="Open Harbour walk" data-index="4"><img class="pic" src="assets/images/placeholder.svg" alt="Harbour walk" loading="lazy"></button><figcaption>Harbour walk</figcaption>
  </figure>
  <figure class="gallery-item">
    <button type="button" class="gallery-open" aria-label="Open Paper trail" data-index="5"><img class="pic" src="assets/images/placeholder.svg" alt="Paper trail" loading="lazy"></button><figcaption>Paper trail</figcaption>
  </figure>
</div>
© Vitreo. All rights reserved.