Split Photo Quote

Two-column split layout: a large photo fills one half, a large pull-quote and attribution fill the other. Stacks to a single column on mobile with the photo on top. Good for featuring one flagship customer story prominently.

By Staaarter Team

Testimonials

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/split-photo-quote.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/testimonials/testimonial11.tsx instead.

Usage

The file also exports testimonial11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Testimonial11, testimonial11Demo } from "@/components/blocks/testimonials/testimonial11";

export default function Page() {
  return <Testimonial11 {...testimonial11Demo} />;
}

Props

Prop	Type	Default	Description
image	MediaSlotImage	undefined	Large photo on one side; falls back to a placeholder when omitted.
quote	string	none	The pull-quote text.
name	string	none	Attributed person's name.
role	string	none	Attributed person's role.
company	string	undefined	Attributed person's company, appended after the role when set.
className	string	none	Extra classes for the outer section element.

Behavior notes

Fully static, server-rendered section with no interactivity.
The photo column and quote column are equal-width and stack (photo first) below the sm breakpoint.

More Testimonials Blocks

View all →

Single Large Quote

One large centered pull-quote with a decorative quote mark and a simple avatar attribution below.

Three Column Grid

Responsive grid of quote cards, each with a star rating, avatar, name, role, and quote text.

Quote Carousel

Interactive one-at-a-time quote carousel with prev/next arrows and clickable dot indicators.

Video Testimonial Grid

Grid of video-style testimonial cards, each a 16:9 thumbnail with a play-button overlay and a caption.

Masonry Wall

"Wall of love" style masonry layout of many short quote cards using CSS columns, not a JS library.

Quote With Stats Sidebar

Split layout pairing a large quote and attribution with a sidebar of 2-3 result stats.