Testimonial One

The Testimonial One block is a carousel-based testimonial section that cycles through customer or user quotes. Each slide renders a rich text body with decorative quote icons, the reviewer’s name, job title, company, and an avatar image — all inside a card layout that supports drag and swipe gestures. On mobile a single slide is shown; on larger screens two slides appear side-by-side with arrow navigation.

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

Preview

Testimonial Block Heading

Working with this team has completely transformed the way we approach our digital strategy. From the very first workshop, they demonstrated a deep understanding of both product thinking and technical execution.

Samantha Clarke

Head of Digital Transformation, BrightWave Solutions Ltd

The level of professionalism and technical expertise delivered throughout our project was outstanding. What impressed us most was their ability to balance speed with quality — delivering milestones on time without cutting corners.

Michael O'Connor

Chief Technology Officer, Northbridge Analytics

I was skeptical at first, but the results genuinely spoke for themselves. The team took time to understand our audience deeply before writing a single line of code. The component library they delivered is both flexible and consistent — our developers adopted it within days.

Priya Mehta

VP of Product, Catalyst Systems

What set this engagement apart was the quality of the feedback loop. Issues were surfaced early, decisions were documented clearly, and nothing fell through the cracks. It felt less like outsourcing and more like having extra senior engineers embedded in our team.

Tom Eriksen

Engineering Lead, Vantage Digital

Code

import mockedTestimonialBlock from "@/data/mock/optimizely/testimonial/testimonial-block.json";
import { testimonialCmsMappers } from "@/registry/rokkit200-ui/blocks/testimonial/internals/lib/testimonial-utils";
import { TestimonialOne } from "@/registry/rokkit200-ui/blocks/testimonial/variants/testimonial-one/testimonial-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";
import {
  testimonialBlockCodeModel,
  testimonialBlockFragment,
} from "./constants";

export default function testimonialOneDefaultDemo() {
  const properties = mapCmsType(
    testimonialCmsMappers,
    mockedTestimonialBlock.data.TestimonialBlock.item
  );

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

Code Model

WIP

GraphQL Query

query TestimonialBlockQuery {
    TestimonialBlock {
      item {
        ...TestimonialBlockFragment
      }
    }
  }

  fragment TestimonialBlockFragment on TestimonialBlock {
    Heading
    Items {
      ...TestimonialItemFragment
    }
  }

  fragment TestimonialItemFragment on TestimonialItem {
    Date
    MainBody {
      json
    }
    ReviewerName
    ReviewerJobTitle
    ReviewerCompany
    ReviewerImage {
      ... on ImageMedia {
        AltText
        _metadata {
          url {
            default
          }
        }
        _imageMetadata {
          width
          height
        }
      }
    }
  }

Composition

TestimonialOne is assembled from the following components:

Component	Role
Carousel	Provides the slide container, dots, arrows, and drag/swipe logic
RichText	Renders each testimonial body as structured rich text
ContentImage	Renders the reviewer avatar with responsive <picture> support
Button	Used internally for the custom previous/next arrow controls

Shared internals (testimonial-internals) provide the TestimonialProperties type, image profile, and CMS mapper utilities used by all testimonial variants.

Usage

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

import { TestimonialOne } from "@/rokkit200-ui/blocks/testimonial/variants/testimonial-one/testimonial-one";
import { mapCmsType } from "@/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { testimonialCmsMappers } from "@/rokkit200-ui/blocks/testimonial/internals/lib/testimonial-utils";

const properties = mapCmsType(testimonialCmsMappers, testimonialResponse);

return <TestimonialOne {...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 avatar styling.

Compact

Reduce padding, gaps, font sizes, and avatar dimensions for a tighter, space-efficient presentation.

Preview

Testimonial Block Heading

Working with this team has completely transformed the way we approach our digital strategy. From the very first workshop, they demonstrated a deep understanding of both product thinking and technical execution.

Samantha Clarke

Head of Digital Transformation, BrightWave Solutions Ltd

The level of professionalism and technical expertise delivered throughout our project was outstanding. What impressed us most was their ability to balance speed with quality — delivering milestones on time without cutting corners.

Michael O'Connor

Chief Technology Officer, Northbridge Analytics

I was skeptical at first, but the results genuinely spoke for themselves. The team took time to understand our audience deeply before writing a single line of code. The component library they delivered is both flexible and consistent — our developers adopted it within days.

Priya Mehta

VP of Product, Catalyst Systems

What set this engagement apart was the quality of the feedback loop. Issues were surfaced early, decisions were documented clearly, and nothing fell through the cracks. It felt less like outsourcing and more like having extra senior engineers embedded in our team.

Tom Eriksen

Engineering Lead, Vantage Digital

Code

import mockedTestimonialBlock from "@/data/mock/optimizely/testimonial/testimonial-block.json";
import { testimonialCmsMappers } from "@/registry/rokkit200-ui/blocks/testimonial/internals/lib/testimonial-utils";
import { TestimonialOne } from "@/registry/rokkit200-ui/blocks/testimonial/variants/testimonial-one/testimonial-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function TestimonialOneCompactDemo() {
  const properties = mapCmsType(
    testimonialCmsMappers,
    mockedTestimonialBlock.data.TestimonialBlock.item
  );

  return (
    <TestimonialOne
      {...properties!}
      slideClassName="rounded-lg p-3 gap-y-3"
      richTextClassName="text-sm"
      nameClassName="text-base"
      jobCompanyClassName="text-xs"
      mediaClassName="h-10 w-10"
    />
  );
}

Accent Border

Replace the default rounded card with a flat, top-bordered style for a sharper editorial look.

Preview

Testimonial Block Heading

Working with this team has completely transformed the way we approach our digital strategy. From the very first workshop, they demonstrated a deep understanding of both product thinking and technical execution.

Samantha Clarke

Head of Digital Transformation, BrightWave Solutions Ltd

The level of professionalism and technical expertise delivered throughout our project was outstanding. What impressed us most was their ability to balance speed with quality — delivering milestones on time without cutting corners.

Michael O'Connor

Chief Technology Officer, Northbridge Analytics

I was skeptical at first, but the results genuinely spoke for themselves. The team took time to understand our audience deeply before writing a single line of code. The component library they delivered is both flexible and consistent — our developers adopted it within days.

Priya Mehta

VP of Product, Catalyst Systems

What set this engagement apart was the quality of the feedback loop. Issues were surfaced early, decisions were documented clearly, and nothing fell through the cracks. It felt less like outsourcing and more like having extra senior engineers embedded in our team.

Tom Eriksen

Engineering Lead, Vantage Digital

Code

import mockedTestimonialBlock from "@/data/mock/optimizely/testimonial/testimonial-block.json";
import { testimonialCmsMappers } from "@/registry/rokkit200-ui/blocks/testimonial/internals/lib/testimonial-utils";
import { TestimonialOne } from "@/registry/rokkit200-ui/blocks/testimonial/variants/testimonial-one/testimonial-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function TestimonialOneAccentBorderDemo() {
  const properties = mapCmsType(
    testimonialCmsMappers,
    mockedTestimonialBlock.data.TestimonialBlock.item
  );

  return (
    <TestimonialOne
      {...properties!}
      slideClassName="rounded-none border-t-4 border-t-blue-500 bg-white shadow-sm dark:border-t-blue-400 dark:bg-zinc-900"
      mediaClassName="h-12 w-12 rounded-lg"
    />
  );
}

API Reference

TestimonialOneProperties

Extends TestimonialProperties (from testimonial-internals).

Prop	Type	Default	Description
heading	string	—	Visually hidden heading for the testimonial section. Required.
testimonials	TestimonialSlide[]	—	Array of testimonial slide objects to render in the carousel.
className	string	—	Classes applied to the root <section> element.
slideClassName	string	—	Classes applied to each slide <article> card.
headingClassName	string	—	Classes applied to the visually hidden <h2> heading.
richTextClassName	string	—	Classes applied to the RichText component in each slide.
nameClassName	string	—	Classes applied to the reviewer name <h3>.
jobCompanyClassName	string	—	Classes applied to the job title and company <p>.
companyClassName	string	—	Classes applied to the company name (reserved for future use).
mediaClassName	string	—	Classes applied to the ContentImage avatar element.

TestimonialSlide

Each item in the testimonials array has the following shape:

Prop	Type	Description
date	string	Date of the testimonial.
mainBody	RichTextNode[]	Structured rich text nodes for the testimonial body.
company	string	Reviewer’s company name (optional).
media	{ imageSource, profile }	Avatar image source and responsive picture profile.
jobTitle	string	Reviewer’s job title.
name	string	Reviewer’s name.

Accessibility

• The root element is a <section> with aria-labelledby pointing to a visually hidden heading, providing a labelled landmark for assistive technology.
• The heading renders as an <h2> with sr-only styling. Ensure the heading text is descriptive (e.g. “Customer Testimonials”) so screen reader users understand the section purpose.
• Each slide is an <article> with aria-label set to “Testimonial from x”, giving each testimonial an accessible label.
• Navigation arrows are <button> elements with aria-label (“Previous slide” / “Next slide”) and are properly disabled when at the boundary of navigation.
• The carousel supports keyboard navigation and touch/drag gestures with watchDrag enabled.
• Reviewer avatar images are marked as decorative (empty alt text) since the reviewer’s name is already present as text, avoiding redundant announcements.
• The carousel includes dot indicators for visual orientation. Ensure sufficient colour contrast between dots and the background.

Related Patterns

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