Gallery
<Gallery> collects a set of story cards and presents them as a friendly grid. Each <Gallery.Item> supplies its own thumbnail, caption, and short summary, then opens a roomy popup where you can reuse Viewer, Map, ImageStory, prose, or any custom MDX block to add depth without sending readers to another page.
Use it when you want to highlight favorite works, curate a mini exhibit, or gather related pieces into a single scan. The example below pulls from the cached Northwestern manifests and shows how a reader can browse tiles at a glance, tap a card, and explore richer notes inside the popup.
![Miniatures on mica, [standing man, profile]](https://iiif.dc.library.northwestern.edu/iiif/3/8a50f46a-32bd-4ec3-8d68-11aea71a470e/full/!800,800/0/default.jpg)
![Miniatures on mica, [standing man with musical instrument]](https://iiif.dc.library.northwestern.edu/iiif/3/715e834a-b005-4571-9547-b52526d709c5/full/!800,800/0/default.jpg)
![Miniatures on mica, [seated woman sewing]](https://iiif.dc.library.northwestern.edu/iiif/3/e6e6e212-1117-46ca-972f-3bc745bfc07c/full/!800,800/0/default.jpg)
Miniatures on mica, [standing man, profile]
Opaque watercolors, likely lead white for the angarkha, indigo for the sash, and orpiment for the turban, describe a standing intermediary paused with parasol and folded textile. Against mica's neutral ground, the figure's stance, layered cloth, and restrained accessories demonstrate coastal mercantile dress codes and the portability of shade and textiles in humid streets.
Miniatures on mica, [standing man, profile]The palette reflects circulating pigments in coastal India around 1800—lead white ground locally, indigo cakes exported through Surat, and orpiment imported from Burmese mines for saturated orange—each layer sitting as an opaque wash rather than a blended glaze, matching the fast production cycles of mica workshops serving visiting merchants and officials.
Compare the folded textile with Company-period export shawls: the parasol's green likely mixes malachite with gamboge, suggesting concern for sun exposure in humid ports, while the mica support ensured quick drying and portability, allowing compact sheets like this to travel to Calcutta or London as evidence of dress conventions that informed East India Company textile orders.
Miniatures on mica, [standing man with musical instrument]
Mineral and vegetal pigments, perhaps orpiment, gamboge, and carbon black, map an itinerant musician balancing a spike fiddle against his chest. The taut bow and bundled cloth emphasize portable performance, while linear hatching on robe and sandals underscores how sound and movement traveled along pilgrimage roads.
Miniatures on mica, [standing man with musical instrument]The orange robe likely layers orpiment with a thin realgar glaze—pigments circulated through Bengal trade—while the dark outlines may mix carbon black with iron-rich earth, and touches of crimson on the shoulder bag hint at lac dye bound with gum arabic, materials well suited to the mica surface that resists absorption.
By keeping the palette limited, the artist signals a devotional musician accustomed to itinerancy: the spike fiddle, or sarangi variant, and the bundled cloth over his shoulder suggest portability, as the paint tracks from turban ridge to bow arc echo the circulation of sound during bhakti gatherings, documenting both costume and the labor of sound making.
Miniatures on mica, [seated woman sewing]
Opaque washes, likely gamboge for the skirt, natural ultramarine for the shawl, and vermilion for accessories, concentrate on a seated embroiderer mid-stitch. The curtained canopy frames domestic labor as performance, and the spare red cap ties the scene to household economies and portable sartorial commissions.
Miniatures on mica, [seated woman sewing]The intense yellow likely derives from gamboge gum imported through Southeast Asian trade and layered over lead white to prevent cracking; her shawl's blue may point to natural ultramarine ground from Afghan lapis, while the red cap and ribbon probably rely on vermilion from cinnabar—pigments that signaled value to overseas patrons.
Within households supplying garments to Company brokers, mica studies like this documented both pattern and palette: the green valance situates her in a semi-public workspace, the spare tools underscore an economy built on portable equipment, and the white stitched arcs—tiny reserves where pigment was lifted before fully dry—reflect watercolor techniques circulating between Calcutta and London that turned embroidery into a record of color recipes for exporters.
Organizing Gallery content
Implementers can organize gallery popups with any MDX content, but the <GalleryContent> component provides a simple wrapper to apply consistent gutters and an optional layout for side-by-side media and text. In the example below, we use flex={true} to place an ImageStory next to a descriptive aside, but you can mix and match Viewers, Maps, markdown, or any custom components as needed.
An Indian woman burning herself on the death of her husband
An Indian woman is powerfully poised over her deceased husband’s burning pyre, with a fist raised as part of the funeral ritual, suttee. For a Hindu widow, suttee was considered an honorable death, sparing societal disapproval and the loss of certain social liberties.
An Indian woman burning herself on the death of her husband.A Suttee: Preparing for the Immolation of a Hindoo Widow
A bare-breasted woman draped in a white garment prepares for sati–a sacrifice in which a widow burns herself upon the death of her husband–amongst a crowd of Hindu worshippers at the ghats of river Vishwamitri against a backdrop of temples and shrines in the city of Baroda (present-day Vadodara). Although both British and Indian people had pushed for sati’s abolition, colonial powers often cited the brutal nature of the ritual as justification for their rule. The British government officially outlawed sati in 1829.
A suttee : preparing for the immolation of a Hindoo widowAPI
Gallery
| Prop | Type | Required | Notes |
|---|---|---|---|
title | string | Optional heading rendered above the grid. | |
description | string | Short intro paragraph under the heading. | |
popupSize | 'full', 'medium' | Toggle fullscreen vs. windowed popup layout (default 'full'). | |
order | 'default', 'random' | Control figure ordering; random shuffles once during the build. | |
children | nodes | ✅ | One or more <Gallery.Item> entries. |
Gallery Item
| Prop | Type | Required | Notes |
|---|---|---|---|
title | string | ✅ | Primary caption text and popup heading. |
summary | string · node | Short description shown under the title (also reused inside the popup). | |
caption | node | Provide custom figcaption markup. When set, title/summary rendering is skipped. | |
meta | string · string[] | Supplemental metadata displayed under the caption and inside the popup header. | |
thumbnail/src | string | Preview image URL used in the grid. media remains as an alias for string sources. | |
thumbnailAlt | string | Alt text for the thumbnail image. Defaults to title. | |
referencedManifests / manifest(s) | string · string[] | Resolve manifests into derived labels, summaries, and thumbnails (overridden when props are provided). | |
slug | string | Optional stable identifier for deep-linking popup IDs (hash uses #gallery-modal-*). | |
triggerLabel | string | Custom accessible label for the figure trigger link. | |
popupTitle | string | Override the popup heading; falls back to title. | |
popupDescription | string · node | Override the popup description; falls back to summary/description. | |
children | nodes | ✅ | Modal body content. Accepts any MDX component (Viewer, Map, ImageStory, markdown, etc). |
Gallery Content
| Prop | Type | Required | Notes |
|---|---|---|---|
flex | boolean | When true, the wrapper switches to a row-based flex layout. | |
children | nodes | ✅ | Modal body markup. Works with any MDX content (Viewers, prose, etc.). |