Skip to content
DocumentationExamples
← All components

Editorial Image Grid

Editorial image arrangement with keyboard-accessible lightboxes.

Open demo ↗
HTML source & reuse instructions

Keep the CSS and JavaScript links from this page. Asset paths are relative to the modules folder.

<div class="versa-image-grid versa-editorial"><button aria-label="Enlarge composition 1" class="versa-site-image-button" data-versa-site-lightbox="" type="button"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-project.svg" width="960"/></button><button aria-label="Enlarge composition 2" class="versa-site-image-button" data-versa-site-lightbox="" type="button"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-content.svg" width="960"/></button><button aria-label="Enlarge composition 3" class="versa-site-image-button" data-versa-site-lightbox="" type="button"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-dashboard.svg" width="960"/></button><button aria-label="Enlarge composition 4" class="versa-site-image-button" data-versa-site-lightbox="" type="button"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-device.svg" width="960"/></button></div>