Testimonial Card

Single testimonial card

Marketing BlockTestimonials

Overview

A card component for displaying a single customer testimonial. The quote is wrapped in typographic quotation marks. Supports an author avatar (with initial fallback), optional title, and an optional company logo.

Usage

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

Default

Minimal card with just a quote and author name.

This product has completely transformed the way our team collaborates. We ship faster and with more confidence.

Jane Doe

With avatar and title

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

Marcus ChenSenior Engineer at Vercel

With company logo

We evaluated five solutions and this one stood out for its simplicity and power.

Priya SharmaVP of Product

Full featured

Avatar, title, and company logo.

Switching to this library cut our design-to-code time in half. The components are polished, accessible, and easy to extend.

Sofia MartinezDesign Systems Lead

Without title

Avatar but no role/title.

A game changer for our engineering team.

Alex Kim

Without avatar

No avatar — shows the initial fallback letter.

Best investment we made this year. The ROI was immediate.

Rachel GreenCEO at StartupCo

Dark mode

This product has completely transformed the way our team collaborates. We ship faster and with more confidence.

Jane Doe

With avatar — dark mode

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

Marcus ChenSenior Engineer at Vercel

Full featured — dark mode

Switching to this library cut our design-to-code time in half. The components are polished, accessible, and easy to extend.

Sofia MartinezDesign Systems Lead

With company logo — dark mode

We evaluated five solutions and this one stood out for its simplicity and power.

Priya SharmaVP of Product

Props

Prop	Type	Default	Description
`quote`	`string`	—	Testimonial text (required)
`authorName`	`string`	—	Author name (required)
`authorTitle`	`string?`	—	Author role/title
`authorAvatar`	`ImageProps?`	—	Avatar image — falls back to name initial
`companyLogo`	`ImageProps?`	—	Company logo image
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on root Card

Notes

The quote uses CSS before/after content for typographic quotation marks (" / ").
When authorAvatar is omitted, no avatar is rendered. The initials fallback only shows when an avatar src fails to load.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.

Props

Name	Type	Default	Required
`quote`	`string`	—	Yes
`authorName`	`string`	—	Yes
`authorTitle`	`string`	—	No
`authorAvatar`	`ImageProps`	—	No
`companyLogo`	`ImageProps`	—	No
`colorScheme`	`enum`	—	No
`className`	`string`	—	No