When to use it

Use GalleryWithCaption when several captioned visual tiles belong to one section and need a shared heading plus a little more art direction than a plain grid.

Composition notes

The component wraps child content in a responsive gallery shell. indent changes the section rhythm, while colorTheme handles the background and text context around the gallery.

Without indent, the gallery scales from one column up to a broader multi-column grid. With indent, it settles into a tighter two-column editorial layout from medium screens upward. Choose the mode based on whether the section should feel like a gallery wall or a more paced story sequence.

Behavior and theming guidance

This wrapper works best when the child cards share a consistent image treatment and caption weight. Let the gallery own the section mood and let the child cards handle the individual story details.

classNames now exposes stable heading and grid hooks, which is often enough to create wildly different section personalities: airy editorial spacing, dense merchandising grids, centered feature headings, or compact utility rows.

Keep the child cards visually related by using the same image ratio and similar caption length. The wrapper should set the section rhythm and palette, while each child card provides the specific content.