Theme Playground

Storefront

Gallery

Section wrapper for arranging image, block, or product children in a consistent gallery layout.

Best for

editorial image collectionsproduct groupscampaign galleries

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.
  • heading adds 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.

2 examples

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

gridheadingrootinnercarouselcarouselContentcarouselItem

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
headingstring
Optional section heading rendered above the gallery grid
variantstring"grid"
Layout variant controlling how gallery items are arranged
childrenstring
Gallery item elements (e.g. ImageBlock or CardImageWithCaption components)
classNamesPartial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").GallerySlot, string>>
No description yet.
Slot keys
gridheadingrootinnercarouselcarouselContentcarouselItem
classNamestring
No description yet.