Portrait Customer StoryPRO

Testimonial44: Portrait Customer Story

Single customer story that sets a tall portrait with a gradient name card beside an oversized light quote, a hairline row of three proof figures underneath, and a link into the full write-up.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/testimonial44?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/testimonial44?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/testimonial44.tsx plus the badge23 component it uses for the eyebrow.

Quick start

The installed file exports testimonial44Demo alongside the block: the exact props behind the preview above. Spread it to get a working story in one line.

import { Testimonial44, testimonial44Demo } from "@/components/beste/block/testimonial44";

export default function Page() {
  return <Testimonial44 {...testimonial44Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Testimonial44 } from "@/components/beste/block/testimonial44";

export default function Page() {
  return (
    <Testimonial44
      badge={{ label: "Customer story" }}
      heading="Brightwell Group, twelve sites, one quarter"
      description="A group practice that moved every location onto the same workflow."
      person={{
        image: { src: "/images/elena.jpg", alt: "Portrait of Elena Rourke" },
        name: "Elena Rourke",
        role: "Group practice manager",
      }}
      quote="Twelve sites now open the same screen, and the only thing that travels between them is the member's record."
      metrics={[
        { value: "12", label: "Sites on one workflow" },
        { value: "1 quarter", label: "From first site to last" },
        { value: "31%", label: "Fewer no-shows" },
      ]}
      link={{ label: "Read the full story", href: "/customers/brightwell" }}
    />
  );
}

Props

type Person = {
  image: { src: string; alt: string };
  name: string;
  role: string;
};

type Metric = { value: string; label: string };

Behavior notes

• The quote is a <blockquote> set unquoted at display size with the attribution living on the portrait, which is what makes the section read as one story rather than as a card in a testimonial grid.
• The right column is justify-between, so the quote sits at the top and the metrics and link stay anchored to the bottom of the portrait's height on desktop.
• The portrait takes lg:h-auto and stretches to the content beside it, while below lg it falls back to a fixed h-80, sm:h-96 band so a tall crop never dominates a phone screen.
• The name card is fixed dark over a gradient scrim, so its two lines use the fixed text-background tokens rather than the adaptive ones.
• The metrics row is sm:grid-cols-3 and takes whatever it is given, so passing two leaves a gap on the right. Three is the shape it is drawn for.
• Metric values are strings, so 1 quarter and 31% sit in the same row without a unit prop or any formatting in the block.