# Testimonial 11 – Editorial quote grid

> A structured testimonial layout that combines a clear section header with a multi-column grid of short quotes. It balances scannability and depth by presenting many voices at once, using consistent cards and subtle hierarchy to reinforce trust without relying on a single standout story.

A shadcn/ui block from the [@shadcncraft](https://shadcncraft.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcncraft/testimonials-11).

- Page, with a live preview: https://shadcn.exchange/r/shadcncraft/testimonials-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcncraft/testimonials-11-light-aa867ef17010185d.png
- Registry item: https://shadcncraft.com/r/testimonials-11.json
- Categories: testimonials
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcncraft.com/r/testimonials-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@shadcncraft/section-heading`, `@shadcncraft/profile-card`

## Notes from the registry

Tip: browse, preview and install every shadcncraft block from your editor with the shadcncraft extension for VS Code and Cursor: https://shadcncraft.com/ide-extension

## Files

### `blocks/pro-marketing/testimonials/testimonials-11/index.tsx`

```tsx
import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
import { Card, CardContent } from "@/components/ui/card";
import {
  ProfileCard,
  ProfileCardAvatar,
  ProfileCardDetails,
} from "@/components/shadcncraft/pro-marketing/profile-card";
import {
  SectionHeading,
  SectionHeadingBody,
  SectionHeadingTagline,
  SectionHeadingTitle,
} from "@/components/shadcncraft/pro-marketing/section-heading";

export function Testimonials11() {
  return (
    <section className="py-6 lg:py-20">
      <div className="mx-auto flex max-w-7xl flex-col gap-12 px-5 lg:gap-16 lg:px-8">
        {/* Section Heading */}
        <SectionHeading alignment="center" className="mx-auto w-full max-w-3xl">
          <SectionHeadingTagline>Testimonials</SectionHeadingTagline>
          <SectionHeadingTitle>What Our Customers Say</SectionHeadingTitle>
          <SectionHeadingBody>
            Don&apos;t just take our word for it. See what teams are saying about Acme
            Inc.
          </SectionHeadingBody>
        </SectionHeading>

        {/* Testimonials Grid */}
        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
          {testimonialsData.map((testimonial) => (
            <Card key={testimonial.id}>
              <CardContent className="group flex flex-1 flex-col gap-6">
                <IconPlaceholder
                  lucide="Quote"
                  tabler="IconQuote"
                  hugeicons="QuoteDownIcon"
                  phosphor="QuotesIcon"
                  remixicon="RiDoubleQuotesL"
                  className="size-6 rotate-180 text-muted-foreground transition-colors group-hover:text-foreground"
                />
                <blockquote className="text-lg font-medium text-pretty">
                  {testimonial.quote}
                </blockquote>
                <IconPlaceholder
                  lucide="Quote"
                  tabler="IconQuote"
                  hugeicons="QuoteDownIcon"
                  phosphor="QuotesIcon"
                  remixicon="RiDoubleQuotesL"
                  className="size-6 self-end text-muted-foreground transition-colors group-hover:text-foreground"
                />
                <ProfileCard className="mt-auto">
                  <ProfileCardAvatar src={testimonial.imageSrc} name={testimonial.name} />
                  <ProfileCardDetails name={testimonial.name} body={testimonial.role} />
                </ProfileCard>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

const testimonialsData = [
  {
    id: 1,
    quote:
      "From onboarding to ongoing support, Acme Inc. has impressed us every step of the way. The tools are robust, yet easy to use.",
    name: "Paula Rodriguez",
    role: "Head of Operations",
    imageSrc: "https://assets.shadcncraft.com/images/registry/person-7.webp",
  },
  {
    id: 2,
    quote:
      "I love how seamlessly everything integrates. Our workflows are smoother and our clients have noticed the difference.",
    name: "Marcus Lee",
    role: "Client Success Manager",
    imageSrc: "https://assets.shadcncraft.com/images/registry/person-2.webp",
  },
  {
    id: 3,
    quote:
      "The constant updates and improvements show Acme Inc. truly cares about its users. Highly recommended for any growing company.",
    name: "Vivian Chen",
    role: "CTO",
    imageSrc: "https://assets.shadcncraft.com/images/registry/person-5.webp",
  },
  {
    id: 4,
    quote:
      "Acme Inc. made our project launches less stressful and more organized. The dashboard is a delight to work with each day.",
    name: "Sean O'Malley",
    role: "Project Coordinator",
    imageSrc: "https://assets.shadcncraft.com/images/registry/person-4.webp",
  },
  {
    id: 5,
    quote:
      "The feedback from our own customers has been overwhelmingly positive ever since we switched to Acme's platform.",
    name: "Linda Kim",
    role: "Customer Experience Lead",
    imageSrc: "https://assets.shadcncraft.com/images/registry/person-3.webp",
  },
  {
    id: 6,
    quote:
      "Powerful features, beautiful UI, and a support team that listens. I can't recommend Acme Inc. highly enough.",
    name: "Hanna Lee",
    role: "VP of Marketing",
    imageSrc: "https://assets.shadcncraft.com/images/registry/person-6.webp",
  },
];
```