Testimonial

Testimonial is a customer-quote block: the quote, an attribution (name + role), and an optional 1–5 star rating, rendered as semantic <figure> / <blockquote> / <figcaption> / <cite> HTML. It is a surface-web component — for marketing pages and Webflow client sites, not product UI.

Use it for

• A single customer quote on a landing or marketing page
• Social-proof blocks with attribution and a star rating
• Client-site testimonial sections

Import

import { Testimonial } from '@brikdesigns/bds';

Variants

Brand

variant="brand" (default) renders the quote on a brand-tinted surface. quote is the body, authorName + authorRole the attribution.

<Testimonial
  quote="Brik rebuilt our site in a week and it finally looks like us."
  authorName="Dana Reyes"
  authorRole="Founder, Northwind Dental"
/>

Outlined

variant="outlined" swaps to a neutral surface with a border — for pages where the brand tint is too heavy.

<Testimonial variant="outlined" quote="…" authorName="Dana Reyes" authorRole="Founder" />

With a rating

rating (1–5) renders filled stars beneath the attribution.

<Testimonial
  quote="Best decision we made all year."
  authorName="Sam Okonkwo"
  authorRole="Owner, Vale Partners"
  rating={5}
/>

When not to use

• Don't reach for the deprecated CardTestimonial. It is a stub that redirects here — use Testimonial directly.

Accessibility

• Renders semantic <figure> / <blockquote> / <figcaption> / <cite>, so the quote and attribution carry correct roles for free.
• The decorative quote mark is aria-hidden; the star rating is exposed as role="img" with an aria-label like "5 out of 5 stars".

API

Plus all standard HTML attributes for the root <figure>.

Related

• Card testimonial — deprecated predecessor (redirects here)
• Pricing card — sibling marketing surface
• Card — general content surface for in-product quotes
• Storybook playground