SocialProof

organisms

Social proof — testimonial cards carousel or grid. Quote + author + role + avatar. Optional logo wall.

ARIA Role: region

Demo

Demo for SocialProof (organisms)

Social proof — testimonial cards carousel or grid. Quote + author + role + avatar. Optional logo wall.

Props

PropTypeRequiredDefaultDescription
testimonialsTestimonial[]Yes—3-12 items
layout'carousel' | 'grid'Yes—

TypeScript Interface

interface SocialProofProps {
  testimonials: { id: string; quote: string; author: string; role?: string; avatar: { url: string; alt: string }; rating?: number }[];
  layout: 'carousel' | 'grid';
  heading?: string;
  logos?: { id: string; src: string; alt: string; href?: string }[];
}

Assertions (NASA Rule 5)

  • [type]testimonials bounded 3-12 (NASA Rule 2)(NASA Rule 2)
  • [aria]role='region'; carousel pattern for carousel layout(WAI-ARIA Carousel Pattern)

Usage

Import

import { Socialproof } from '@epasslive/design-system'

Basic

<Socialproof />

With Variants

<Socialproof variant="primary" size="md" />