Card 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 (default)

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