Testimonial Section

A social proof section with testimonial quotes, avatars, and attribution. Supports single centered layout or responsive grid for multiple testimonials.

Preview

Single Testimonial

Visor's design system has completely transformed how our team builds consistent UI. The token system is a game-changer.

Jane Smith

Design Lead, Acme Corp

Multiple Testimonials (Grid)

Incredible component library with best-in-class theming support. Our team shipped faster than ever.

Alice Johnson

Frontend Engineer, TechCo

The token system makes it effortless to stay visually consistent across all our products.

Bob Williams

Product Designer, Designify

Copy-and-own components are a revelation. We customize freely without worrying about upstream breaking changes.

Carol Davis

CTO, StartupXYZ

Installation

npx visor add --block testimonial-section

This copies files into your project:

blocks/testimonial-section/testimonial-section.tsx — the block component
blocks/testimonial-section/testimonial-section.module.css — the styles

Usage

import { TestimonialSection } from '@/blocks/testimonial-section/testimonial-section';

export default function HomePage() {
  return (
    <TestimonialSection
      heading="What our customers say"
      testimonials={[
        {
          quote: "This design system transformed how we build UI.",
          author: "Jane Smith",
          role: "Design Lead",
          company: "Acme Corp",
          avatarSrc: "/avatars/jane.jpg",
        },
      ]}
    />
  );
}

Props

`TestimonialSectionProps`

Prop	Type	Default	Description
`testimonials`	`Testimonial[]`	—	Array of testimonial objects (required)
`heading`	`string`	—	Optional section heading
`className`	`string`	—	Additional CSS class for the root element

`Testimonial`

Prop	Type	Default	Description
`quote`	`string`	—	The testimonial quote text (required)
`author`	`string`	—	Author's full name (required)
`role`	`string`	—	Author's job title
`company`	`string`	—	Author's company name
`avatarSrc`	`string`	—	URL for the author's avatar image
`avatarFallback`	`string`	—	Fallback text for avatar (defaults to first letter of author name)

Composition

This block composes five Visor primitives:

Card — Container with surface styling for the multi-testimonial grid layout
Avatar — Author profile image with fallback initial support
Heading — Optional section heading
Text — Author name and role/company attribution
Separator — Visual divider between quote and attribution

Quotes use <blockquote> and attribution uses <cite> per HTML spec and WCAG guidelines. Quote marks are rendered via CSS ::before pseudo-element to keep them decorative and screen-reader-neutral.

About Blocks

Blocks are complete UI patterns made up of multiple Visor components. Unlike individual components, blocks represent larger, composed sections of UI — such as testimonial sections, login forms, or settings panels.

Blocks are copy-and-own, just like components. Install them into your project and customize freely.