Library · Media & Buttons

Media / Gallery Lightbox Grid

Responsive image grid that opens a <dialog> lightbox with keyboard prev/next and Escape-to-close. Thumbnails link to the full image with no JS. Tone via the shared contract.

Figma: Media / Gallery Lightbox Grid ↗
Live preview — edit theme bottom-right 
---
import GalleryLightbox from "../components/figma/GalleryLightbox.astro";
const img = (label, w, h) =>
  `data:image/svg+xml;utf8,` +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><rect width="${w}" height="${h}" fill="#c9c2b8"/><text x="${w/2}" y="${h/2}" font-family="sans-serif" font-size="20" fill="#5b5346" text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`,
  );
---
<GalleryLightbox
  heading="Display suite gallery"
  columns={3}
  tone="base-100"
  images={[
    { src: img("Living 1", 1200, 900), alt: "Living room", caption: "Open-plan living" },
    { src: img("Kitchen", 1200, 900), alt: "Kitchen", caption: "Stone benchtops" },
    { src: img("Bedroom", 1200, 900), alt: "Master bedroom" },
    { src: img("Bathroom", 1200, 900), alt: "Ensuite" },
    { src: img("Balcony", 1200, 900), alt: "Balcony view" },
    { src: img("Facade", 1200, 900), alt: "Building facade" },
  ]}
/>

Props

NameTypeRequiredDescription
heading string; — Optional heading
images GalleryImage[]; Yes Gallery images
columns number; — Columns on wide screens (default: 3)
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral"; — Background tone — the Figma colour-variant axis

Example with all props

<GalleryLightbox
  heading="Display suite gallery"
  columns={3}
  images={[
    { src: "/gallery/living.jpg", alt: "Living room", caption: "Open-plan living" },
    { src: "/gallery/kitchen.jpg", alt: "Kitchen" },
  ]}
/>