Gallery. A responsive image gallery with captions and links.
- Media
- Static
- Stability · Initial
- ::postkit-gallery
From the field
A responsive collection of article media.
Usage.
<Gallery
title="From the field"
description="A responsive collection of article media."
columns="3"
items='[{"src":"/component-preview.svg","alt":"Abstract editorial artwork","caption":"Dispatch one"},{"src":"/component-preview.svg","alt":"Abstract editorial artwork","caption":"Dispatch two"},{"src":"/component-preview.svg","alt":"Abstract editorial artwork","caption":"Dispatch three"}]'
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsRequired | JSON string | None | A JSON array of image, alt, caption, and link data. |
| title | string | None | The gallery heading. |
| description | string | None | Supporting copy for the gallery. |
| columns | "1" | "2" | "3" | "4" | "2" | The preferred desktop column count. |
| presentation | "grid" | "row" | "grid" | grid lays the items out in columns; row sets 2–3 related items side by side, a horizontal snap rail on phones. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- header
- title
- description
- grid
- item
- imageLink
- image
- caption
- number
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned