Stats Sections

stat-counter

stable Bibliothèque Contenu inline (instance)

Preuve sociale

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.

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
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`stats`	Contenu	`array`	Oui	·	2..4
`animate`	Contenu	`bool`	Non	·	·

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.

Compteurs · fond papier
curée
stat-counter--paper
Compteurs · fond papier 2
curée
stat-counter--paper-2
Compteurs · fond papier 3
curée
stat-counter--paper-3
stat-counter · ligne en ligne
générée
stat-counter--inline-row
stat-counter · grille uniforme
générée
stat-counter--grid-uniform
stat-counter · grand nombre split
générée
stat-counter--big-number-split
stat-counter · bento
générée
stat-counter--bento
stat-counter · avec contexte
générée
stat-counter--with-context
stat-counter · bandeau défilant
générée
stat-counter--ticker
stat-counter · paire comparée
générée
stat-counter--comparison-pair
stat-counter · ligne KPI
générée
stat-counter--kpi-row
stat-counter · double mesure
générée
stat-counter--dual-metric
stat-counter · barres de progression
générée
stat-counter--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.

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

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.

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.

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.

Similaires

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.

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.

social-proof stable

Section de logos clients ou partenaires pour installer une preuve sociale immédiate.

band Logo Sections Défilement continuLogosListe +1 19 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.

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": "stat-counter",
  "background": "ink",
  "kicker_fr": "Impact mesuré",
  "kicker_en": "Measured impact",
  "h2_fr": "Ce que produisent <i>nos agents</i>",
  "h2_en": "What <i>our agents</i> deliver",
  "animate": true,
  "stats": [
    {
      "value": "99.9",
      "suffix": "%",
      "label_fr": "disponibilité moyenne",
      "label_en": "average uptime"
    },
    {
      "value": "120",
      "prefix": "+",
      "label_fr": "workflows automatisés",
      "label_en": "automated workflows"
    },
    {
      "value": "40",
      "suffix": "%",
      "label_fr": "coûts opérationnels en moins",
      "label_en": "lower operating cost"
    },
    {
      "value": "4.8",
      "suffix": "/5",
      "label_fr": "satisfaction client",
      "label_en": "client satisfaction"
    }
  ]
}

Pour un agent / MCP

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

/library/section/stat-counter.json

Chemin du détail machine

/library/section/stat-counter.json