TestimonialsBlock

Overview

A structured testimonials section with a fixed left column (heading, subtitle, optional CTA) and a horizontally scrollable card row on the right. Each card can display a quote, author info, optional stat, and a "read story" link.

Usage

import { TestimonialsBlock } from "@leanicon/web-builder-library";

Default

Full-featured block with heading, subtitle, CTA, avatars, company names, stats, and read-more links.

Loved by teams everywhere

Join thousands of companies using our platform.

View all stories

Our deployment time dropped by 70%. The team has never been more productive.

Acme Corp

Jane Smith

CTO

Read the story

70%

Faster deployments

The developer experience is outstanding. From setup to production in under an hour.

Vercel

Marcus Chen

Senior Engineer

Read the story

Faster shipping

We evaluated five solutions and this one stood out. It scaled effortlessly with our growth.

TechCorp

Priya Sharma

VP of Product

Read the story

50%

Less code to maintain

Without stats

Cards without the stat metric section.

What our customers say

Real feedback from real teams.

A game changer for our engineering team. We shipped 3x faster.

StartupCo

Alice Johnson

CTO

The components are polished and easy to extend. Our designers love it.

Bob Smith

Lead Developer

Our design system is now consistent across all products.

BigCorp

Carol White

Design Systems Lead

Without subtitle and CTA

Heading-only left column.

Trusted by industry leaders

Our deployment time dropped by 70%.

Acme Corp

Jane Smith

CTO

70%

Faster deployments

Outstanding developer experience.

Vercel

Marcus Chen

Senior Engineer

Faster shipping

With read-more links

Cards with href show a "Read the story" link.

Customer stories

This product has completely transformed how our team collaborates.

Acme Corp

Jane Smith

CTO

Read the story

The developer experience is outstanding. Our engineers love it.

Vercel

Marcus Chen

Senior Engineer

Read the story

Scaled effortlessly with our growth.

TechCorp

Priya Sharma

VP of Product

Read the story

Custom border radius

Loved by teams

Our deployment time dropped by 70%.

Acme Corp

Jane Smith

CTO

70%

Faster deployments

Outstanding developer experience.

Vercel

Marcus Chen

Senior Engineer

Faster shipping

Sharp corners

Loved by teams

Our deployment time dropped by 70%.

Acme Corp

Jane Smith

CTO

70%

Faster deployments

Outstanding developer experience.

Vercel

Marcus Chen

Senior Engineer

Single testimonial

Navigation arrows hidden with a single item.

Featured story

Switching to this library cut our design-to-code time in half. The team has never been more productive.

Startup Co

Sofia Martinez

Frontend Architect

Read the story

50%

Less development time

Dark mode

Loved by teams everywhere

Join thousands of companies using our platform.

View all stories

Our deployment time dropped by 70%. The team has never been more productive.

Acme Corp

Jane Smith

CTO

Read the story

70%

Faster deployments

The developer experience is outstanding. From setup to production in under an hour.

Vercel

Marcus Chen

Senior Engineer

Read the story

Faster shipping

We evaluated five solutions and this one stood out. It scaled effortlessly.

TechCorp

Priya Sharma

VP of Product

Read the story

50%

Less code to maintain

Without stats — dark mode

What our customers say

Real feedback from real teams.

A game changer for our engineering team.

StartupCo

Alice Johnson

CTO

The components are polished and easy to extend.

Bob Smith

Lead Developer

Consistent design across all our products.

BigCorp

Carol White

Design Systems Lead

Props

Prop	Type	Default	Description
`heading`	`string`	—	Left column heading (required)
`subtitle`	`string?`	—	Left column subtitle
`cta`	`CTAButton?`	—	Left column CTA button
`testimonials`	`TestimonialsBlockItem[]`	—	Testimonial cards (required)
`readStoryLabel`	`string`	`"Read the story"`	Link text for cards with `href`
`borderRadius`	`BorderRadius`	`"xl"`	Card border radius
`animation`	`TestimonialsBlockAnimation?`	—	Animation config for heading and cards
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on root

TestimonialsBlockItem

Field	Type	Description
`quote`	`string`	Testimonial text (required)
`authorName`	`string`	Author name (required)
`authorTitle`	`string?`	Author role/title
`authorAvatar`	`ImageProps?`	Author avatar image
`companyName`	`string?`	Company name (bold above author)
`companyLogo`	`ImageProps?`	Company logo image
`href`	`string?`	Read-story link URL
`stat`	`{ value: string; label: string }?`	Highlighted metric at card bottom

Notes

Each card is 400px wide; the scrollable row hides the scrollbar.
Navigation arrows only appear when there are 2+ testimonials.
stat renders a large bold value with a monospace uppercase label, separated by a top border.
borderRadius accepts: none, sm, md, lg, xl, 2xl, 3xl, full.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.