Testimonial Sections

testimonial-metrics

stable Bibliothèque Contenu inline (instance)

Preuve sociale, Montrer les réalisations

Témoignage chiffré : grande citation serif d’un côté + grille de 3 à 4 métriques massives de l’autre, reliées par une barre accent. Combine la voix client et le résultat mesuré en un seul bloc de réassurance.

Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Intention

Preuve sociale Montrer les réalisations

Rôle de page

Preuve

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`variant`	Présentation	`enum`	Non	·	quote-left · quote-right
`kicker`	Contenu	`text`	Non	fr / en	·
`quote`	Contenu	`text`	Oui	fr / en	·
`author`	Contenu	`text`	Oui	·	·
`role`	Contenu	`text`	Oui	fr / en	·
`company`	Contenu	`text`	Non	·	·
`metrics`	Contenu	`array`	Oui	·	3..4

Déclinaisons · 18

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 8 curées, 10 générées.

Témoignage chiffré · citation à gauche · encre
curée
testimonial-metrics--quote-left-ink
Témoignage chiffré · citation à gauche · papier
curée
testimonial-metrics--quote-left-paper
Témoignage chiffré · citation à gauche · papier 2
curée
testimonial-metrics--quote-left-paper-2
Témoignage chiffré · citation à droite · encre
curée
testimonial-metrics--quote-right-ink
Témoignage chiffré · citation à droite · papier
curée
testimonial-metrics--quote-right-paper
Témoignage chiffré · citation à droite · papier 3
curée
testimonial-metrics--quote-right-paper-3
Témoignage chiffré · citation à gauche · papier 3
curée
testimonial-metrics--quote-left-paper-3
Témoignage chiffré · citation à droite · papier 2
curée
testimonial-metrics--quote-right-paper-2
testimonial-metrics · ligne en ligne
générée
testimonial-metrics--inline-row
testimonial-metrics · grille uniforme
générée
testimonial-metrics--grid-uniform
testimonial-metrics · grand nombre split
générée
testimonial-metrics--big-number-split
testimonial-metrics · bento
générée
testimonial-metrics--bento
testimonial-metrics · avec contexte
générée
testimonial-metrics--with-context
testimonial-metrics · bandeau défilant
générée
testimonial-metrics--ticker
testimonial-metrics · paire comparée
générée
testimonial-metrics--comparison-pair
testimonial-metrics · ligne KPI
générée
testimonial-metrics--kpi-row
testimonial-metrics · double mesure
générée
testimonial-metrics--dual-metric
testimonial-metrics · barres de progression
générée
testimonial-metrics--progress-bars

Comparer les déclinaisons · 18

Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.

Témoignage chiffré · citation à gauche · encre
curée
testimonial-metrics--quote-left-ink
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Témoignage chiffré · citation à gauche · papier
curée
testimonial-metrics--quote-left-paper
background:paper
Ouvrir dans le builder
Témoignage chiffré · citation à gauche · papier 2
curée
testimonial-metrics--quote-left-paper-2
background:paper-2
Ouvrir dans le builder
Témoignage chiffré · citation à droite · encre
curée
testimonial-metrics--quote-right-ink
variant:quote-right
Ouvrir dans le builder
Témoignage chiffré · citation à droite · papier
curée
testimonial-metrics--quote-right-paper
background:papervariant:quote-right
Ouvrir dans le builder
Témoignage chiffré · citation à droite · papier 3
curée
testimonial-metrics--quote-right-paper-3
background:paper-3variant:quote-right
Ouvrir dans le builder
Témoignage chiffré · citation à gauche · papier 3
curée
testimonial-metrics--quote-left-paper-3
background:paper-3
Ouvrir dans le builder
Témoignage chiffré · citation à droite · papier 2
curée
testimonial-metrics--quote-right-paper-2
background:paper-2variant:quote-right
Ouvrir dans le builder
testimonial-metrics · ligne en ligne
générée
testimonial-metrics--inline-row
layout:inline-row
Ouvrir dans le builder
testimonial-metrics · grille uniforme
générée
testimonial-metrics--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
testimonial-metrics · grand nombre split
générée
testimonial-metrics--big-number-split
layout:big-number-split
Ouvrir dans le builder
testimonial-metrics · bento
générée
testimonial-metrics--bento
layout:bento
Ouvrir dans le builder
testimonial-metrics · avec contexte
générée
testimonial-metrics--with-context
layout:with-context
Ouvrir dans le builder
testimonial-metrics · bandeau défilant
générée
testimonial-metrics--ticker
layout:ticker
Ouvrir dans le builder
testimonial-metrics · paire comparée
générée
testimonial-metrics--comparison-pair
layout:comparison-pair
Ouvrir dans le builder
testimonial-metrics · ligne KPI
générée
testimonial-metrics--kpi-row
layout:kpi-row
Ouvrir dans le builder
testimonial-metrics · double mesure
générée
testimonial-metrics--dual-metric
layout:dual-metric
Ouvrir dans le builder
testimonial-metrics · barres de progression
générée
testimonial-metrics--progress-bars
layout:progress-bars
Ouvrir dans le builder

Sections liées

Même famille

key-metric-grid stable

Grille de métriques chiffrées magnifiées (style FT/Bloomberg) composant l'atome KeyMetric : chiffre dominant, label mono, delta optionnel. Axes size/align/variant et 2 à 4 colonnes, fond alterné.

stat-grid Stats Sections 4 colonnes 19 décl.

metric-shift stable

Comparaison avant → après : valeur initiale et finale magnifiées, delta.

stat-grid Stats Sections Apparition au scrollDéfilementIllustration au trait +1 13 décl.

stat-block stable

Bloc de statistiques en grille pour mettre en avant des chiffres de performance ou d'impact.

stat-grid Stats Sections Apparition au scrollSurvolDéfilement +5 17 décl.

stat-counter stable

Compteur animé count-up déclenché à l’entrée dans le viewport (île React client:visible), grille de 2 à 4 stats. Respecte prefers-reduced-motion et reste lisible sans JS.

stat-grid Stats Sections Compteurs animésApparition au scrollDéfilement +2 13 décl.

Même catégorie

case-card-grid stable

Table éditoriale de cas clients en six colonnes (index, client, secteur, stack, impact, flèche) façon compte rendu d'audit.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +3 31 décl.

case-featured-grid stable

Grille de cas clients « featured » : un cas mis en avant (colonne large, cover optionnelle) plus des cas secondaires en lignes numérotées, avec chip de provenance.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +6 17 décl.

case-split stable

Cas client en split dark/light 50/50 : récit du cas à gauche (titre, body, CTA) et résultats chiffrés à droite.

split-media Testimonial Sections Apparition au scrollSurvolDéfilement +4 13 décl.

case-spotlight stable

Vitrine de cas concret insérable partout : carte INK avec visuel habillé + titre serti d’un relevé accent, citation à barre accent, métriques massives latérales, tags méta et CTA. Levier de conversion à fort impact.

quote Testimonial Sections Apparition au scrollDéfilementPlusieurs images +8 12 décl.

editorial-case-grid stable

Grille editoriale de cas clients : en-tete numerote + titre + intro, puis cartes EditorialCaseCard en 2 colonnes avec decalage vertical alterne (signature /manifesto Acte IV).

card-grid Testimonial Sections Apparition au scrollSurvolCartes +1 16 décl.

off-proof stable

Signal terrain : citation client (PullQuote) à gauche et grille de chiffres KeyMetric à droite, en asymétrie 5/7 avec séparateur Dingbat.

quote Testimonial Sections Apparition au scrollDéfilementIllustration au trait +5 16 décl.

Similaires

testimonial-logo-metric stable

Carte de preuve B2B la plus persuasive : logo client + citation attribuée + métrique d’impact chiffrée par carte. Combine preuve sociale, autorité de marque et résultat mesuré.

quote Testimonial Sections Apparition au scrollSurvolDéfilement +7 16 décl.

team-card-grid stable

Grille auto-fill de cartes auteurs avec photo, rôle, description, compteur de publications et CTA profil.

card-grid Testimonial Sections Zoom au survolSurvolImage +4 11 décl.

quote-spotlight stable

Grande citation pleine lumiere sur fond paper-2 : guillemet decoratif, texte display italique, auteur avec avatar rond.

quote Testimonial Sections Apparition au scrollDéfilementImage +4 15 décl.

pull-quote-block stable

Citation éditoriale isolée centrée ou inline, wrapper catalogue autour de la molécule PullQuote.

quote Testimonial Sections CitationAvatar1 colonne 18 décl.

testimonial-single-spotlight stable

Un seul témoignage en plein écran : grande citation, portrait, logo client et attribution nom/rôle. Donne tout le poids à une voix client, sombre par défaut.

quote Testimonial Sections Plusieurs imagesCitationAvatar +3 20 décl.

testimonial-block stable

Bloc témoignage pour mettre en avant une citation client et renforcer la confiance.

quote Testimonial Sections Défilement horizontalGlisser pour faire défilerIllustration au trait +7 14 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "testimonial-metrics",
  "background": "ink",
  "variant": "quote-left",
  "kicker_fr": "Preuve client",
  "kicker_en": "Client proof",
  "quote_fr": "En deux semaines, un agent commercial utilisé quotidiennement a redessiné notre pipeline. La conformité a validé sans réserve.",
  "quote_en": "In two weeks, a daily-used sales agent reshaped our pipeline. Compliance signed off without reservation.",
  "author": "Responsable revenue",
  "role_fr": "Direction commerciale",
  "role_en": "Revenue lead",
  "company": "Scale-up B2B",
  "metrics": [
    {
      "k": "5 j",
      "label_fr": "pour câbler le premier agent",
      "label_en": "to wire the first agent"
    },
    {
      "k": "4 sem.",
      "label_fr": "jusqu’au système complet",
      "label_en": "to the full system"
    },
    {
      "k": "1",
      "label_fr": "interlocuteur dédié",
      "label_en": "dedicated contact"
    },
    {
      "k": "Mesuré",
      "label_fr": "ROI suivi, jamais estimé",
      "label_en": "ROI tracked, never estimated"
    }
  ]
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/testimonial-metrics.json

Chemin du détail machine

/library/section/testimonial-metrics.json