Employee Testimonials

Careers16: Employee Testimonials

A centered header (optional badge, <strong>-aware heading, and description) above a responsive one-to-three-column grid of employee testimonial cards, each rendering an italic quote, an avatar with initials fallback, the member's name, and a combined role/department line.

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/careers16?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/careers16.tsx, plus the badge and avatar shadcn/ui primitives it uses for the section eyebrow and the per-card member photos.

Quick start

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

import { Careers16, careers16Demo } from "@/components/beste/block/careers16";

export default function CareersPage() {
  return <Careers16 {...careers16Demo} />;
}

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

import { Careers16 } from "@/components/beste/block/careers16";

export default function CareersPage() {
  return (
    <Careers16
      badge={{ label: "Life at Company", variant: "secondary" }}
      heading="Hear from our <strong>team members</strong>"
      description="Discover what it's like to work here."
      items={[
        {
          quote: "The engineering culture here is incredible.",
          name: "Alex Turner",
          role: "Senior Engineer",
          department: "Engineering",
          avatar: { src: "/team/alex.jpg", alt: "Alex Turner" },
        },
      ]}
    />
  );
}

Props

type TestimonialItem = {
  quote: string;
  name: string;
  role?: string;
  department?: string;
  avatar?: { src: string; alt: string };
};

Behavior notes

• The entire header block is only rendered when at least one of badge, heading, or description is provided; with all three omitted the grid renders on its own.
• heading is injected via dangerouslySetInnerHTML, and any inline <strong> inside it is recolored to text-primary, so it accepts raw HTML rather than plain text.
• badge.variant falls back to "default" when omitted, even though the demo passes "secondary".
• Each card's AvatarFallback is computed by splitting item.name on spaces and joining the first letter of every part, so it shows as many initials as there are words in the name; AvatarImage only mounts when item.avatar is present.
• The role/department line renders only if role or department exists, joining the two present values with ", " via [item.role, item.department].filter(Boolean).join(", ").
• The grid is fixed at one column on mobile, two at sm, and three at lg; cards use justify-between so the attribution row is pinned to the bottom regardless of quote length.
• There are no interactive elements or callbacks: this is a static presentational block with no useState and no click handlers.