Card testimonial

Migration

Same props, same defaults, same markup — the component was renamed. Swap the name (and the import); nothing else changes.

// Before
import { CardTestimonial } from '@brikdesigns/bds';

<CardTestimonial
  quote="Amazing service and results."
  authorName="Sarah Chen"
  authorRole="Owner, Bloom Cafe"
  rating={5}
/>

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

<Testimonial
  quote="Amazing service and results."
  authorName="Sarah Chen"
  authorRole="Owner, Bloom Cafe"
  rating={5}
/>

Every prop (quote, authorName, authorRole, rating, variant) carries over unchanged. See the Testimonial Storybook playground for the current component.

The reference below documents the frozen CardTestimonial API for migration. New code should use Testimonial.

CardTestimonial renders a customer quote in a card layout. Brand variant for marketing surfaces (colored background), outlined variant for in-app contexts (neutral surface with border).

Use it for

• Marketing testimonial walls
• Trust indicators on landing pages and pricing pages
• Customer story callouts
• Case-study card grids inside CardList

For free-form quotes inside body copy, use a <blockquote> directly — CardTestimonial is for displayed-as-card placement.

Import

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

Variants

Brand

Colored background with inverse text. The marketing-page default.

<CardTestimonial
  quote="Amazing service and results — turnaround was faster than promised."
  authorName="Sarah Chen"
  authorRole="Owner, Bloom Cafe"
  rating={5}
/>

Outlined

Neutral surface with a border. Use in app contexts where the brand variant would over-emphasize.

<CardTestimonial
  variant="outlined"
  quote="The redesign tripled our conversion rate."
  authorName="Marcus Lee"
  authorRole="CMO, Northwind"
  rating={5}
/>

Without rating

Star rating is optional. Drop it for product-line testimonials where stars don't apply.

<CardTestimonial
  quote="They get our brand voice better than we do."
  authorName="Priya Patel"
  authorRole="VP Product, Lumen"
/>

Minimal attribution

authorRole is optional. Use for community/user testimonials where context isn't load-bearing.

<CardTestimonial
  quote="Best dental cleaning I've ever had."
  authorName="J. Morrison"
/>

Pattern: testimonial wall

Mix variants in a CardList grid for a visually varied wall.

<CardList orientation="horizontal" gap="lg">
  <CardTestimonial variant="brand" quote="..." authorName="..." rating={5} />
  <CardTestimonial variant="outlined" quote="..." authorName="..." rating={5} />
  <CardTestimonial variant="brand" quote="..." authorName="..." />
</CardList>

When not to use

• Don't use CardTestimonial for non-testimonial content. Press mentions, awards, or other social proof are different patterns — use Card default mode with appropriate composition.
• Don't fake testimonials. Real attribution matters for trust; fake or composite quotes erode credibility when discovered.
• Don't truncate quotes silently. If a quote is too long, edit it to fit (with the customer's permission) or use a Card with explicit quote-and-link-to-full pattern.

Accessibility

• Renders the quote inside a <blockquote> with proper semantics.
• Star rating uses filled/empty SVG icons with aria-label="Rated {n} out of 5".
• Author and role render as <cite> with the role as <span>.

API

Plus standard <article> / <div> HTML attributes.

Related

• Card — flexible content alternative
• CardList — for grids of testimonials
• Storybook playground