Gallery

Multi-image container with grid, carousel, or masonry layout and optional lightbox overlay.

Basic grid gallery

Images are displayed in a responsive grid by default.

{% gallery %}
![Mountain sunrise](https://picsum.photos/seed/sunrise/600/400)
![Forest path](https://picsum.photos/seed/forest/600/400)
![Ocean waves](https://picsum.photos/seed/ocean/600/400)
![Desert dunes](https://picsum.photos/seed/desert/600/400)
![Snowy peaks](https://picsum.photos/seed/peaks/600/400)
![River valley](https://picsum.photos/seed/valley/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;,&quot;lightbox&quot;:&quot;true&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/sunrise/600/400" alt="Mountain sunrise">
      <figcaption>Mountain sunrise</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/forest/600/400" alt="Forest path">
      <figcaption>Forest path</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/ocean/600/400" alt="Ocean waves">
      <figcaption>Ocean waves</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/desert/600/400" alt="Desert dunes">
      <figcaption>Desert dunes</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/peaks/600/400" alt="Snowy peaks">
      <figcaption>Snowy peaks</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/valley/600/400" alt="River valley">
      <figcaption>River valley</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--grid" data-layout="grid" data-lightbox="true" data-elevation="flat" data-rune="gallery" data-density="full">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/sunrise/600/400" alt="Mountain sunrise" />
      <figcaption>Mountain sunrise</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/forest/600/400" alt="Forest path" />
      <figcaption>Forest path</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/ocean/600/400" alt="Ocean waves" />
      <figcaption>Ocean waves</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/desert/600/400" alt="Desert dunes" />
      <figcaption>Desert dunes</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/peaks/600/400" alt="Snowy peaks" />
      <figcaption>Snowy peaks</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/valley/600/400" alt="River valley" />
      <figcaption>River valley</figcaption>
    </figure>
  </div>
</figure>

Carousel layout

Horizontal scrolling with snap points and prev/next navigation.

{% gallery layout="carousel" %}
![Coastal cliffs](https://picsum.photos/seed/cliffs/600/400)
![Autumn leaves](https://picsum.photos/seed/autumn/600/400)
![Starry night](https://picsum.photos/seed/stars/600/400)
![Rolling hills](https://picsum.photos/seed/hills/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;carousel&quot;,&quot;lightbox&quot;:&quot;true&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/cliffs/600/400" alt="Coastal cliffs">
      <figcaption>Coastal cliffs</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/autumn/600/400" alt="Autumn leaves">
      <figcaption>Autumn leaves</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/stars/600/400" alt="Starry night">
      <figcaption>Starry night</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/hills/600/400" alt="Rolling hills">
      <figcaption>Rolling hills</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--carousel" data-layout="carousel" data-lightbox="true" data-elevation="flat" data-rune="gallery" data-density="full">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/cliffs/600/400" alt="Coastal cliffs" />
      <figcaption>Coastal cliffs</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/autumn/600/400" alt="Autumn leaves" />
      <figcaption>Autumn leaves</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/stars/600/400" alt="Starry night" />
      <figcaption>Starry night</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/hills/600/400" alt="Rolling hills" />
      <figcaption>Rolling hills</figcaption>
    </figure>
  </div>
</figure>

Masonry layout

Variable-height items arranged in CSS multi-column flow — each image keeps its natural aspect ratio and stacks down its column.

{% gallery layout="masonry" columns=2 %}
![Tall waterfall](https://picsum.photos/seed/waterfall/600/800)
![Wide panorama](https://picsum.photos/seed/panorama/800/400)
![Square garden](https://picsum.photos/seed/garden/500/500)
![Tall canyon](https://picsum.photos/seed/canyon/600/800)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;masonry&quot;,&quot;lightbox&quot;:&quot;true&quot;,&quot;columns&quot;:&quot;2&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/waterfall/600/800" alt="Tall waterfall">
      <figcaption>Tall waterfall</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/panorama/800/400" alt="Wide panorama">
      <figcaption>Wide panorama</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/garden/500/500" alt="Square garden">
      <figcaption>Square garden</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/canyon/600/800" alt="Tall canyon">
      <figcaption>Tall canyon</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--masonry" data-layout="masonry" data-lightbox="true" data-columns="2" data-elevation="flat" data-rune="gallery" data-density="full" style="--gallery-columns: 2">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/waterfall/600/800" alt="Tall waterfall" />
      <figcaption>Tall waterfall</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/panorama/800/400" alt="Wide panorama" />
      <figcaption>Wide panorama</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/garden/500/500" alt="Square garden" />
      <figcaption>Square garden</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/canyon/600/800" alt="Tall canyon" />
      <figcaption>Tall canyon</figcaption>
    </figure>
  </div>
</figure>

Disable the click-to-enlarge overlay.

{% gallery lightbox=false %}
![Lakeside cabin](https://picsum.photos/seed/cabin/600/400)
![Wildflower meadow](https://picsum.photos/seed/meadow/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;,&quot;lightbox&quot;:&quot;false&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/cabin/600/400" alt="Lakeside cabin">
      <figcaption>Lakeside cabin</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/meadow/600/400" alt="Wildflower meadow">
      <figcaption>Wildflower meadow</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--grid" data-layout="grid" data-lightbox="false" data-elevation="flat" data-rune="gallery" data-density="full">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/cabin/600/400" alt="Lakeside cabin" />
      <figcaption>Lakeside cabin</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/meadow/600/400" alt="Wildflower meadow" />
      <figcaption>Wildflower meadow</figcaption>
    </figure>
  </div>
</figure>

Custom columns

Choose how many columns the grid uses — that's the one knob authors control for layout density. Spacing between items is theme-locked to keep the tile mosaic consistent across galleries; override --rf-gallery-gap (or --rf-gallery-edge for the outer frame) at the theme level if you need to retune.

{% gallery columns=2 caption="Vacation highlights" %}
![Sandy beach](https://picsum.photos/seed/beach/600/400)
![Golden sunset](https://picsum.photos/seed/sunset/600/400)
![Local market](https://picsum.photos/seed/market/600/400)
![Ancient temple](https://picsum.photos/seed/temple/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;,&quot;lightbox&quot;:&quot;true&quot;,&quot;columns&quot;:&quot;2&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/beach/600/400" alt="Sandy beach">
      <figcaption>Sandy beach</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/sunset/600/400" alt="Golden sunset">
      <figcaption>Golden sunset</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/market/600/400" alt="Local market">
      <figcaption>Local market</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/temple/600/400" alt="Ancient temple">
      <figcaption>Ancient temple</figcaption>
    </figure>
  </div>
  <figcaption data-field="caption">Vacation highlights</figcaption>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--grid" data-layout="grid" data-lightbox="true" data-columns="2" data-elevation="flat" data-rune="gallery" data-density="full" style="--gallery-columns: 2">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/beach/600/400" alt="Sandy beach" />
      <figcaption>Sandy beach</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/sunset/600/400" alt="Golden sunset" />
      <figcaption>Golden sunset</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/market/600/400" alt="Local market" />
      <figcaption>Local market</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/temple/600/400" alt="Ancient temple" />
      <figcaption>Ancient temple</figcaption>
    </figure>
  </div>
  <figcaption data-field="caption">Vacation highlights</figcaption>
</figure>

Attributes

Attribute	Type	Required	Description
`layout`	`"grid" \| "carousel" \| "masonry"`	—	Arrangement of images in the gallery
`columns`	`number`	—	Number of columns in grid layout
`lightbox`	`boolean`	—	Allow clicking images to view full-size
`caption`	`string`	—	Caption text displayed below the gallery

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section
prominence	this rune has no page-section header

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Gallery

Basic grid gallery

Carousel layout

Masonry layout

Custom columns

Attributes

Universal attributes

Gallery

Basic grid gallery

Carousel layout

Masonry layout

Without lightbox

Custom columns

Attributes

Universal attributes