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">
  <meta content="grid" data-field="layout">
  <meta content="true" data-field="lightbox">
  <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-gap="default" data-rune="gallery" data-density="full" style="--gallery-gap: var(--rf-spacing-md)">
  <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">
  <meta content="carousel" data-field="layout">
  <meta content="true" data-field="lightbox">
  <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-gap="default" data-rune="gallery" data-density="full" style="--gallery-gap: var(--rf-spacing-md)">
  <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 a masonry grid (CSS progressive enhancement).

{% gallery layout="masonry" columns=4 %}
![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">
  <meta content="masonry" data-field="layout">
  <meta content="true" data-field="lightbox">
  <meta content="4" data-field="columns">
  <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-gap="default" data-columns="4" data-rune="gallery" data-density="full" style="--gallery-columns: 4; --gallery-gap: var(--rf-spacing-md)">
  <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">
  <meta content="grid" data-field="layout">
  <meta content="false" data-field="lightbox">
  <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-gap="default" data-rune="gallery" data-density="full" style="--gallery-gap: var(--rf-spacing-md)">
  <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 and gap

Control the number of columns and spacing between items.

{% gallery columns=2 gap="loose" 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">
  <meta content="grid" data-field="layout">
  <meta content="true" data-field="lightbox">
  <meta content="2" data-field="columns">
  <meta content="loose" data-field="gap">
  <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-gap="loose" data-columns="2" data-rune="gallery" data-density="full" style="--gallery-columns: 2; --gallery-gap: var(--rf-spacing-xl)">
  <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	Default	Description
`layout`	`string`	`grid`	One of `grid`, `carousel`, `masonry`
`columns`	`number`	`3`	Number of columns in the grid
`lightbox`	`boolean`	`true`	Enable click-to-enlarge image overlay
`gap`	`string`	`default`	Spacing between items: `none`, `tight`, `default`, `loose`
`caption`	`string`	—	Caption text displayed below the gallery

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Gallery

Basic grid gallery

Carousel layout

Masonry layout

Custom columns and gap

Attributes

Common attributes

Gallery

Basic grid gallery

Carousel layout

Masonry layout

Without lightbox

Custom columns and gap

Attributes

Common attributes