SocialProof

Implemented

Testimonial grid — one figure per quote (Phosphor Star rating row, blockquote, figcaption author + context) in a responsive 1/2/3-column ul. Localized section heading (« Ce qu'ils en disent » default). Static display organism: no carousel, no avatar, no logo wall (those were a never-shipped v0 spec).

Categoryorganisms

Sourcecomponents/organisms/socialproof/SocialProof.tsx

AI HintUse for storefront marketing testimonial sections (event pages, landing social proof). Renders its own heading + grid — pass 2-6 quotes for balanced 1/2/3-column rows. No empty/loading state and no interactive surface; wrap or gate at the call site.

Bloc témoignages clients avec note en étoiles (1-5) et contexte (réle + lieu). FR-CA : « Ce qu’ils en disent · 5 étoiles sur 5 ».

SocialProof

Organism - Storefront family (Family 8)

Grille responsive 1/2/3 colonnes. Chaque témoignage est un <figure> avec <blockquote> + <figcaption>.

Ce qu'ils en disent

Achat rapide, billets reçus par courriel en moins d’une minute. Service au top à la porte.
Marie T. - Festival Jazz MTL 2025
Boucle magnétique fonctionnelle à la Maison symphonique — mon mari a pu profiter du concert.
Jean-Pierre G. - OSM Symphonie n° 5
Groupe de 12 personnes — service dédié et places ensemble. Je recommande pour les écoles.
Sophie L. - Lion d’Or Gala Jazz

This component supports light and dark mode.

SocialProof (EN)

Organism - Storefront family (Family 8)

Variante EN — locale=‘en’ : « What people are saying » + ‘N out of 5 stars’.

What people are saying

Two-second door scans, no queue. Best ticketing flow I have used in Québec.
Priya P. - Nuit Blanche
Transferred tickets to a friend in seconds — sent, accepted, scanned, done.
Owen R. - Osheaga 2025

Props

Prop

Type

Default

Description

testimonials*

SocialProofTestimonial[]

—

Témoignages — { id, quote, author, context?, rating } (rating requis, 0-5).

heading

string

—

Titre (défaut localisé).

locale

"fr" | "en"

—

Localise le titre par défaut et le nom accessible de la note (« N étoiles sur 5 » / ‘N out of 5 stars’). Défaut ‘fr’.

className

string

—

Classes additionnelles sur le conteneur section.

Props

Preview

SocialProof

Prop

Type

Required

Default

Description

testimonials

SocialProofTestimonial[]

Required

—

Quotes to render — { id, quote, author, context?, rating }. rating is required (0-5, drives the star row); context is the free-form attribution suffix (e.g. 'Osheaga 2025 · 6 billets'). No count bound is enforced in source.

heading

string

Optional

(localized)

Overrides the section h2 text. Default is locale-aware: « Ce qu'ils en disent » (fr) / 'What people are saying' (en).

locale

"fr" | "en"

Optional

'fr'

Localizes the default heading and the star-rating accessible name (« N étoiles sur 5 » / 'N out of 5 stars'). Quote/author/context strings stay call-site-owned. FR default.

className

string

Optional

—

Appended to the section wrapper.

Quick use:<SocialProof />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

import { SocialProof } from "@epasslive/design-system"

Example 1

tsxSnippet

<SocialProof testimonials={testimonials} />

Example 2

tsxSnippet

<SocialProof testimonials={testimonials} locale="en" heading="Fan reviews" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not pass avatar/layout/logos props — SocialProofTestimonial has no avatar and there is no carousel or logo-wall variant (phantom v0 API)

— Do not expect an empty-state branch — an empty array renders an empty grid