Gallery One

The Gallery One block presents a collection of gallery items in an interactive carousel layout. On desktop, it displays a two-column view with a featured image alongside text content, call-to-action links, and a thumbnail carousel for navigation. On mobile, the text stacks above a single-image swipeable carousel.

npx shadcn@latest add @rokkit200-ui/gallery-one

Preview

Mountains

Alpine Peaks

Towering peaks pierce the morning sky as dawn spills across alpine meadows, offering some of the most breathtaking vistas on Earth.

• Explore mountain trails

Mountains

Alpine Peaks

Towering peaks pierce the morning sky as dawn spills across alpine meadows, offering some of the most breathtaking vistas on Earth.

• Explore mountain trails

Coastlines

Ocean Shore

Crystal-clear waters meet powdery white sand along untouched coastlines where the rhythmic tides set a soothing pace.

• Discover coastal escapes

Forests

Deep Woods

Old-growth forests shelter countless species beneath towering canopies, offering a humbling connection to the natural world.

• Wander the forest paths

Deserts

Sand Dunes

Sculpted sand stretches to the horizon, shifting with every breeze. Desert landscapes reveal a beauty that transforms from dawn to dusk.

• Journey through the sands

Waterfalls

Wild Falls

Water plunges over ancient rock formations, sending mist into the surrounding forest. A raw display of nature's untamed power.

• Chase the waterfalls

Lakes

Still Waters

Still waters reflect surrounding peaks and sky. Mountain lakes offer peaceful retreats with mirrored beauty.

• Find lakeside serenity

Valleys

Misty Vale

Morning fog settles into lush green valleys, creating an ethereal landscape that shifts with the rising sun and timeless rural charm.

• Explore hidden valleys

Volcanoes

Fire Lands

Rugged volcanic landscapes tell the story of Earth's fiery origins. Dark basalt and steaming vents form an otherworldly terrain.

• Trek volcanic peaks

Night Skies

Aurora

Shimmering curtains of green and violet light ripple across the polar sky, transforming the night into a living canvas of color.

• Witness the northern lights

Canyons

Deep Canyon

Rivers have carved deep channels through rock over millennia. Canyon walls glow warmly in the setting sun.

• Venture into the canyons

Code

import mockedGalleryBlock from "@/data/mock/optimizely/gallery/gallery-block.json";
import { galleryCmsMappers } from "@/registry/rokkit200-ui/blocks/gallery/internals/lib/gallery-utils";
import { GalleryOne } from "@/registry/rokkit200-ui/blocks/gallery/variants/gallery-one/gallery-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { galleryBlockCodeModel, galleryBlockFragment } from "../constants";

export default function GalleryOneDefaultDemo() {
    const properties = mapCmsType(
        galleryCmsMappers,
        mockedGalleryBlock.data.GalleryBlock.item
    );

    return <GalleryOne {...properties!} />;
}

Code Model

WIP

GraphQL Query

query GalleryBlockQuery {
    GalleryBlock {
      item {
        ...GalleryBlockFragment
      }
    }
  }

  fragment GalleryBlockFragment on GalleryBlock {
    Items {
      PreHeading
      Heading
      MainBody {
        json
      }
      Links {
        __typename
        url {
          type
          default
          hierarchical
          internal
          graph
          base
          __typename
        }
        target
        text
        title
      }
      Media {
        ... on ImageMedia {
          AltText
          _metadata {
            url {
              default
            }
          }
        }
      }
    }
  }

Composition

GalleryOne is assembled from the following components:

Component	Role
Carousel	Provides thumbnail navigation on desktop and swipeable image carousel on mobile
RichText	Renders each gallery item’s body as structured rich text
LinkGroup	Renders the call-to-action links with primary/secondary variant slots
ContentImage	Renders gallery images with responsive <picture> support

Shared internals (gallery-internals) provide the GalleryProperties type, image profiles, and CMS mapper utilities used by all gallery variants.

Usage

Below is an example of how to use GalleryOne in your site.

import { GalleryOne } from "@/rokkit200-ui/blocks/gallery/variants/gallery-one/gallery-one";
import { mapCmsType } from "@/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { galleryCmsMappers } from "@/rokkit200-ui/blocks/gallery/internals/lib/gallery-utils";

const properties = mapCmsType(galleryCmsMappers, galleryResponse);

return <GalleryOne {...properties!} />;

Customisation

All visual customisation is done via className props. No additional CSS or theme tokens are required — pass Tailwind classes to adjust layout, spacing, typography, and media styling.

Reversed Layout

Flip the layout so the featured image appears on the trailing side.

Preview

Mountains

Alpine Peaks

Towering peaks pierce the morning sky as dawn spills across alpine meadows, offering some of the most breathtaking vistas on Earth.

• Explore mountain trails

Mountains

Alpine Peaks

Towering peaks pierce the morning sky as dawn spills across alpine meadows, offering some of the most breathtaking vistas on Earth.

• Explore mountain trails

Coastlines

Ocean Shore

Crystal-clear waters meet powdery white sand along untouched coastlines where the rhythmic tides set a soothing pace.

• Discover coastal escapes

Forests

Deep Woods

Old-growth forests shelter countless species beneath towering canopies, offering a humbling connection to the natural world.

• Wander the forest paths

Deserts

Sand Dunes

Sculpted sand stretches to the horizon, shifting with every breeze. Desert landscapes reveal a beauty that transforms from dawn to dusk.

• Journey through the sands

Waterfalls

Wild Falls

Water plunges over ancient rock formations, sending mist into the surrounding forest. A raw display of nature's untamed power.

• Chase the waterfalls

Lakes

Still Waters

Still waters reflect surrounding peaks and sky. Mountain lakes offer peaceful retreats with mirrored beauty.

• Find lakeside serenity

Valleys

Misty Vale

Morning fog settles into lush green valleys, creating an ethereal landscape that shifts with the rising sun and timeless rural charm.

• Explore hidden valleys

Volcanoes

Fire Lands

Rugged volcanic landscapes tell the story of Earth's fiery origins. Dark basalt and steaming vents form an otherworldly terrain.

• Trek volcanic peaks

Night Skies

Aurora

Shimmering curtains of green and violet light ripple across the polar sky, transforming the night into a living canvas of color.

• Witness the northern lights

Canyons

Deep Canyon

Rivers have carved deep channels through rock over millennia. Canyon walls glow warmly in the setting sun.

• Venture into the canyons

Code

import mockedGalleryBlock from "@/data/mock/optimizely/gallery/gallery-block.json";
import { galleryCmsMappers } from "@/registry/rokkit200-ui/blocks/gallery/internals/lib/gallery-utils";
import { GalleryOne } from "@/registry/rokkit200-ui/blocks/gallery/variants/gallery-one/gallery-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function GalleryOneReversedDemo() {
    const properties = mapCmsType(
        galleryCmsMappers,
        mockedGalleryBlock.data.GalleryBlock.item
    );

    return (
        <GalleryOne
            {...properties!}
            className="[&>div:first-child]:md:flex-row-reverse"
        />
    );
}

API Reference

GalleryOneProperties

Extends GalleryProperties (from gallery-internals).

Prop	Type	Default	Description
items	GalleryItemProperties[]	—	Array of gallery items to display. Required.
className	string	—	Classes applied to the root <article> element.
textContainerClassName	string	—	Classes applied to the text content wrapper.
preHeadingClassName	string	—	Classes applied to the <span> pre-heading element.
headingClassName	string	—	Classes applied to the <h2> heading element.
bodyClassName	string	—	Classes applied to the RichText component wrapper.
linksClassName	string	—	Classes applied to the LinkGroup wrapper.
featuredImageContainerClassName	string	—	Classes applied to the featured image container <div>.
featuredImageClassName	string	—	Classes applied to the featured ContentImage element.
thumbnailCarouselClassName	string	—	Classes applied to the thumbnail Carousel wrapper.
thumbnailClassName	string	—	Classes applied to individual thumbnail buttons.

GalleryItemProperties

Each item in the items array has the following shape:

Prop	Type	Description
preHeading	string	Pre-heading text displayed above the heading.
heading	string	The item heading text.
mainBody	RichTextNode[]	Structured rich text nodes for the body content.
links	LinkItem[]	Array of link items rendered via LinkGroup.
media	{ imageSource, profile }	Image source and responsive picture profile.

Accessibility

• The root element is an <article> with aria-labelledby pointing to the heading, providing a labelled landmark for assistive technology.
• The heading renders as an <h2>. Ensure it fits the document outline where the block is placed.
• Thumbnail buttons include aria-label attributes describing the target gallery item.
• The Carousel component provides built-in keyboard navigation, arrow buttons, and dot indicators with appropriate ARIA roles.
• The featured image receives loading="eager" and fetchPriority="high" to prioritise above-the-fold rendering.

Related Patterns

• Responsive Images — guidance on image profiles and <picture> usage.
• Grouped Content — composing blocks into page sections.