Stats Sections

metric-shift

stable Bibliothèque Contenu inline (instance)

Preuve sociale

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

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

Rôle de page

Preuve

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`shifts`	Contenu	`array`	Oui	·	2..6
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink

Déclinaisons · 13

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

Avant → après · fond papier 2
curée
metric-shift--paper-2
Avant → après · fond papier 3
curée
metric-shift--paper-3
Avant → après · fond encre
curée
metric-shift--ink
metric-shift · ligne en ligne
générée
metric-shift--inline-row
metric-shift · grille uniforme
générée
metric-shift--grid-uniform
metric-shift · grand nombre split
générée
metric-shift--big-number-split
metric-shift · bento
générée
metric-shift--bento
metric-shift · avec contexte
générée
metric-shift--with-context
metric-shift · bandeau défilant
générée
metric-shift--ticker
metric-shift · paire comparée
générée
metric-shift--comparison-pair
metric-shift · ligne KPI
générée
metric-shift--kpi-row
metric-shift · double mesure
générée
metric-shift--dual-metric
metric-shift · barres de progression
générée
metric-shift--progress-bars

Comparer les déclinaisons · 13

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.

Avant → après · fond papier 2
curée
metric-shift--paper-2
background:paper-2
Ouvrir dans le builder
Avant → après · fond papier 3
curée
metric-shift--paper-3
background:paper-3
Ouvrir dans le builder
Avant → après · fond encre
curée
metric-shift--ink
background:ink
Ouvrir dans le builder
metric-shift · ligne en ligne
générée
metric-shift--inline-row
layout:inline-row
Ouvrir dans le builder
metric-shift · grille uniforme
générée
metric-shift--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
metric-shift · grand nombre split
générée
metric-shift--big-number-split
layout:big-number-split
Ouvrir dans le builder
metric-shift · bento
générée
metric-shift--bento
layout:bento
Ouvrir dans le builder
metric-shift · avec contexte
générée
metric-shift--with-context
layout:with-context
Ouvrir dans le builder
metric-shift · bandeau défilant
générée
metric-shift--ticker
layout:ticker
Ouvrir dans le builder
metric-shift · paire comparée
générée
metric-shift--comparison-pair
layout:comparison-pair
Ouvrir dans le builder
metric-shift · ligne KPI
générée
metric-shift--kpi-row
layout:kpi-row
Ouvrir dans le builder
metric-shift · double mesure
générée
metric-shift--dual-metric
layout:dual-metric
Ouvrir dans le builder
metric-shift · barres de progression
générée
metric-shift--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.

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.

testimonial-metrics stable

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.

stat-grid Testimonial Sections Apparition au scrollDéfilementLogos +3 18 décl.

Même catégorie

key-metric-grid stable

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

metric-callout-band stable

Bande d’une à trois métriques héro surdimensionnées accompagnées d’une phrase de contexte. Frappe fort sur un résultat chiffré, sombre par défaut pour la mise en avant.

band Stats Sections Compteurs animésListe3 colonnes 17 décl.

proof-bar stable

Barre de preuve compacte pour afficher des métriques clés et renforcer la crédibilité.

band Stats Sections Apparition au scrollDéfilementChiffres clés +2 19 décl.

roi-band stable

Bande ROI sur fond ink : en-tête eyebrow et titre display, chiffres KeyMetric placés en asymétrie 6/5.

band Stats Sections Apparition au scrollDéfilementIllustration au trait +2 17 décl.

spec-bar stable

Barre de spécifications projet N colonnes (label mono + valeur) avec grille CSS var, extrait de CaseStudyTemplate.

band Stats Sections Apparition au scrollDéfilement3 colonnes 16 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.

Similaires

ecosystem-partners stable

Logos partenaires technologiques unifiés (masque alpha + currentColor), groupés par catégorie, grille / mur / marquee, variante dark.

card-grid Logo Sections Défilement continuSurvolIllustration au trait +4 20 décl.

logo-wall stable

Grille statique de logos partenaires ou clients, avec effet grayscale vers couleur au hover. Distinct du bandeau animé marquee-band.

marquee Logo Sections Défilement continuZoom au survolApparition au scroll +6 13 décl.

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.

integrations-grid stable

Grille de logos d’intégrations groupés par catégorie (CRM, communication, données). Répond à l’objection « est-ce que ça se branche à nos outils ? » d’un coup d’œil.

card-grid Logo Sections SurvolPlusieurs imagesLogos +2 8 décl.

logo-marquee stable

Bandeau de logos image à défilement infini (« ils nous font confiance »), marquee CSS, grayscale optionnel. Respecte prefers-reduced-motion. Distinct du marquee-band texte mono.

marquee Logo Sections Défilement continuSurvolLecture automatique +3 13 décl.

marquee-band stable

Bandeau marquee mono uppercase à défilement horizontal infini · items + séparateurs · respecte prefers-reduced-motion.

marquee Logo Sections Défilement continu1 colonne 9 décl.

Code

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

{
  "type": "metric-shift",
  "kicker_fr": "§ Résultats mesurés",
  "kicker_en": "§ Measured results",
  "h2_fr": "Avant → <i>après</i>.",
  "h2_en": "Before → <i>after</i>.",
  "lede_fr": "Trois indicateurs RevOps, mesurés avant et après câblage.",
  "lede_en": "Three RevOps indicators, measured before and after wiring.",
  "shifts": [
    {
      "label_fr": "Taux de récupération dunning",
      "label_en": "Dunning recovery rate",
      "before": "34 %",
      "after": "61 %",
      "delta_fr": "+27 pts",
      "delta_en": "+27 pts",
      "trend": "up"
    },
    {
      "label_fr": "Délai 1er contact",
      "label_en": "First-contact delay",
      "before": "48 h",
      "after": "< 2 min",
      "delta_fr": "−99 %",
      "delta_en": "−99 %",
      "trend": "down"
    },
    {
      "label_fr": "Erreur réconciliation",
      "label_en": "Reconciliation error",
      "before": "4 %",
      "after": "0,3 %",
      "delta_fr": "−93 %",
      "delta_en": "−93 %",
      "trend": "down"
    }
  ],
  "background": "paper"
}

Pour un agent / MCP

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

/library/section/metric-shift.json

Chemin du détail machine

/library/section/metric-shift.json