Gallery

The Gallery component provides you with image galleries and media showcases.

Live Examples

Live Example

View Code

import { Gallery } from '@nostromo/ui-marketing'

export default function GalleryExample() {
  return (
    <Gallery
      images={[
        { src: "https://via.placeholder.com/400x300?text=Image+1", alt: "Image 1" },
        { src: "https://via.placeholder.com/400x300?text=Image+2", alt: "Image 2" },
        { src: "https://via.placeholder.com/400x300?text=Image+3", alt: "Image 3" },
        { src: "https://via.placeholder.com/400x300?text=Image+4", alt: "Image 4" },
        { src: "https://via.placeholder.com/400x300?text=Image+5", alt: "Image 5" },
        { src: "https://via.placeholder.com/400x300?text=Image+6", alt: "Image 6" }
      ]}
      columns={3}
      aspectRatio="square"
    />
  )
}

Code Examples

Props

Prop	Type	Default	Description
`images`	`Image[]`	-	Array of image objects
`columns`	`number`	`3`	Number of columns
`aspectRatio`	`string`	`"auto"`	Image aspect ratio
`spacing`	`string`	`"md"`	Grid spacing
`lightbox`	`boolean`	`true`	Enable lightbox

Pricing LogoWall