Gallery
Section wrapper for arranging image, block, or product children in a consistent gallery layout.
Best for
Import
import { Gallery } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use Gallery when several visual blocks belong to one section and need a shared heading plus a repeatable layout rhythm. It works for image collections, grouped campaign cards, and editorial grids that mix several child block types.
If the children are specifically LinkBlock tiles in a horizontal browsing row, GalleryWithLinkBlocks is the more opinionated choice.
Composition notes
Gallery is a wrapper component. You bring the children and choose the layout:
variant="grid"is the balanced default.variant="masonry"gives uneven image sets a looser editorial feel.variant="filmstrip"pushes the layout toward a horizontal sequence.headingadds section framing above the children.
Because children are free-form, keep one visual language per gallery. Mixing too many card shapes usually makes the section feel noisy.
Behavior and theming guidance
Use the heading only when the gallery needs section framing. If the surrounding page already provides a clear heading, the wrapper can stay visual and simple.
Spacing comes from the gallery recipe, so prefer choosing the right variant before manually forcing lots of item-level margin tweaks.
Examples
Live examples you can edit directly in the sandbox.
Grid gallery
The default grid layout is the safest starting point for balanced product or editorial collections.
Filmstrip layout
Use filmstrip when the gallery should feel more like a horizontal editorial sequence than a strict card grid.
Slots
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | — | Optional section heading rendered above the gallery grid |
| variant | string | "grid" | Layout variant controlling how gallery items are arranged |
| children | string | — | Gallery item elements (e.g. ImageBlock or CardImageWithCaption components) |
| classNames | Partial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").GallerySlot, string>> | — | No description yet. Slot keys gridheadingrootinnercarouselcarouselContentcarouselItem |
| className | string | — | No description yet. |