PixelTestimonialCard

Surface-aware testimonial card with quote, attribution, avatar, star rating and verified badge.

  • Semantic article + blockquote markup for accessible social proof
  • Tone tokens drive avatar + accents; surface adapts borders, radii and fonts
  • Optional star rating and VERIFIED badge for trust signals
  • Three quote-size presets (compact / normal / long) keep card grids aligned
Status
stable
Category
cards
Since
v1.7.0

API

import { PixelTestimonialCard } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
quote (required)string—The quote, set between curly quotation marks.
name (required)string—Who said it.
rolestring—Their role, before the company.
companystring—Their company.
avatar{ src?: string; name: string; tone?: ToneKey }—Photo, or the name and tone of the initials; the initials of name without one.
starsnumber—Star rating out of 5; none for 0 or unset.
verifiedbooleanfalseShows the VERIFIED badge.
tone'neutral' | 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink''neutral'Tone of the initials.
variant'card' | 'quote' | 'slider''card'card draws the surface chrome; quote and slider leave it out.
quoteSize'compact' | 'normal' | 'long''normal'Minimum height of the quote.
actionsReact.ReactNode—Actions under the quote (a link to the full story).
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.

Also takes the native attributes and event handlers of its element (HTMLAttributes<HTMLElement>).

ref points to its element (HTMLElement).

Accessibility

WCAG target: 2.1 AA

  • semantic blockquote + cite
  • figure/figcaption for quote variant

Renders as <article> with a <blockquote> for the testimonial body; verified badge exposes an aria-label.

Usage

import { PixelTestimonialCard } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelTestimonialCard
      quote="pxlkit dropped the polish ceiling. Our marketing site felt like a product launch in a week."
      name="Marisol Quintero"
      role="Head of Design"
      company="Northbeam"
      stars={5}
      verified
    />
  );
}

Examples

Default

import { PixelTestimonialCard } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelTestimonialCard
      quote="pxlkit dropped the polish ceiling. Our marketing site felt like a product launch in a week."
      name="Marisol Quintero"
      role="Head of Design"
      company="Northbeam"
      stars={5}
      verified
    />
  );
}

With avatar + tone

import { PixelTestimonialCard } from '@pxlkit/ui-kit';

export function WithAvatarAndTone() {
  return (
    <PixelTestimonialCard
      tone="cyan"
      quote="The retro surface tokens just clicked with our brand. Zero CSS surgery, all signal."
      name="Diego Salas"
      role="Staff Engineer"
      company="Halcyon Labs"
      avatar={{ name: 'Diego Salas', tone: 'cyan' }}
      stars={4}
    />
  );
}

Compact quote

import { PixelTestimonialCard } from '@pxlkit/ui-kit';

export function CompactQuote() {
  return (
    <PixelTestimonialCard
      quoteSize="compact"
      quote="Short. Sharp. Shipped."
      name="Ana Pereira"
      role="PM"
      tone="gold"
      verified
    />
  );
}

Related