Stats Sections

key-metric-grid

stable Bibliothèque Contenu inline (instance)

Preuve sociale

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é.

Ouvrir dans le builder

Instances sur le site

Global 1 instance sur 1 page

Page	Position	Contenu	Variante
/ressources/guides/claude-pme	`section 3`	Un plan, pas une promesse	accentpaper

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
`eyebrow`	Présentation	`text`	Non	fr / en	·
`title`	Contenu	`text`	Non	fr / en	·
`columns`	Présentation	`number`	Non	·	·
`size`	Contenu	`enum`	Non	·	sm · md · lg · hero
`align`	Contenu	`enum`	Non	·	left · center · right
`variant`	Présentation	`enum`	Non	·	default · inverted · accent
`metrics`	Contenu	`array`	Oui	·	2..∞
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`layout`	Présentation	`text`	Non	·	·
`density`	Présentation	`enum`	Non	·	compact · base · ample
`contentAlign`	Présentation	`enum`	Non	·	start · center · end
`actionsAlign`	Présentation	`enum`	Non	·	start · center · end · spread
`placement`	Présentation	`object`	Non	·	·
`colRatio`	Présentation	`enum`	Non	·	equal · 1-2 · 2-1 · 1-1-2 · 2-3 · golden
`itemHeight`	Présentation	`enum`	Non	·	auto · even · square · video
`proportion`	Présentation	`enum`	Non	·	1-1 · 1-2 · 2-1 · 2-3 · 3-2
`mediaSide`	Présentation	`enum`	Non	·	left · right
`surface`	Présentation	`enum`	Non	·	flat · outlined · filled · elevated · ghost
`divider`	Présentation	`enum`	Non	·	none · hairline · rule
`radius`	Présentation	`enum`	Non	·	none · sm · md · lg
`accentEdge`	Présentation	`enum`	Non	·	none · top · left
`colsMobile`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · auto
`colsTablet`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · auto
`layoutMobile`	Présentation	`text`	Non	·	·
`titleScale`	Présentation	`enum`	Non	·	sm · base · lg · xl
`eyebrow`	Présentation	`enum`	Non	·	none · kicker · badge
`justifyContent`	Présentation	`enum`	Non	·	start · center · end · between · around · evenly
`alignItems`	Présentation	`enum`	Non	·	start · center · end · stretch · baseline
`justifyItems`	Présentation	`enum`	Non	·	start · center · end · stretch
`alignContent`	Présentation	`enum`	Non	·	start · center · end · between · stretch
`cellAlignX`	Présentation	`enum`	Non	·	start · center · end
`cellAlignY`	Présentation	`enum`	Non	·	top · middle · bottom · between
`cellPad`	Présentation	`enum`	Non	·	none · sm · base · lg
`mediaFit`	Présentation	`enum`	Non	·	cover · contain
`mediaRatio`	Présentation	`enum`	Non	·	auto · 1-1 · 4-3 · 3-2 · 16-9
`reveal`	Présentation	`enum`	Non	·	none · fade · slide-up · slide-down · slide-left · slide-right · scale-in · blur-in · mask-up
`hover`	Présentation	`enum`	Non	·	none · lift · zoom · glow · border · tint · underline · reveal-cta · media-zoom
`pressFeedback`	Présentation	`enum`	Non	·	none · press
`focusRing`	Présentation	`enum`	Non	·	auto · ring · inset · none
`transitionSpeed`	Présentation	`enum`	Non	·	instant · fast · base · slow
`transitionEase`	Présentation	`enum`	Non	·	standard · out · spring
`selectedState`	Présentation	`enum`	Non	·	none · outline · fill · accent-edge
`openState`	Présentation	`enum`	Non	·	auto
`revealStagger`	Présentation	`bool`	Non	·	·
`revealDelay`	Présentation	`enum`	Non	·	none · sm · md
`loop`	Présentation	`enum`	Non	·	none · marquee · pulse · float
`scrollMotion`	Présentation	`enum`	Non	·	none · parallax · pin · progress
`textMotion`	Présentation	`enum`	Non	·	none · word-stagger · count-up · type-on
`motionSpeed`	Présentation	`enum`	Non	·	fast · base · slow
`motionEase`	Présentation	`enum`	Non	·	standard · out · spring
`pageTransition`	Présentation	`enum`	Non	·	none · fade · slide
`cellBg`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink · ink-2 · ink-3 · accent · none
`cellTone`	Présentation	`enum`	Non	·	ink · muted · accent · accent-text · paper
`tone`	Présentation	`enum`	Non	·	ink · muted · accent · accent-text · paper
`borderTone`	Présentation	`enum`	Non	·	hairline · hairline-strong · accent · none
`textFlow`	Présentation	`enum`	Non	·	horizontal · vertical-rl · vertical-lr · sideways
`textTransform`	Présentation	`enum`	Non	·	none · uppercase · lowercase · capitalize
`rotate`	Présentation	`enum`	Non	·	90 · 180 · none · -90
`objectPosition`	Présentation	`enum`	Non	·	center · top · bottom · left · right
`overflow`	Présentation	`enum`	Non	·	visible · clip · auto
`scrollSnap`	Présentation	`enum`	Non	·	none · proximity · mandatory
`measure`	Présentation	`enum`	Non	·	prose · read · tight · wide · full
`balance`	Présentation	`bool`	Non	·	·
`clamp`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · none
`minHeight`	Présentation	`enum`	Non	·	auto · half · screen
`width`	Présentation	`enum`	Non	·	full · contained · narrow · prose
`headingLevel`	Présentation	`enum`	Non	·	h2 · h3
`ariaLabel`	Présentation	`text`	Non	·	·
`headerAlign`	Présentation	`enum`	Non	·	left · center · right
`headerKind`	Présentation	`enum`	Non	·	none · title · eyebrow-title · eyebrow-title-lede · eyebrow-title-lede-cta
`introRow`	Présentation	`enum`	Non	·	none · lede-aside · desc-media-split · lede-centered
`dividers`	Présentation	`enum`	Non	·	none · column-rules · row-rules · grid-lines
`cardContent`	Présentation	`enum`	Non	·	title · title-desc · icon-title-desc · title-desc-meta · media-title-desc
`cardMedia`	Présentation	`enum`	Non	·	none · icon · image · image-bg
`cardAlign`	Présentation	`enum`	Non	·	left · center
`colorDistribution`	Présentation	`enum`	Non	·	uniform · featured-first · one-accent · alternating
`bgSource`	Présentation	`enum`	Non	·	color · image · gradient
`bgImage`	Présentation	`text`	Non	·	·

Déclinaisons · 19

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

KPI clés · grille · fond papier 2
curée
key-metric-grid--paper-2
KPI clés · grille · fond papier 3
curée
key-metric-grid--paper-3
KPI clés · trois colonnes
curée
key-metric-grid--3col
KPI clés · deux colonnes · chiffres géants
curée
key-metric-grid--2col-hero
KPI clés · alignés au centre
curée
key-metric-grid--center
KPI clés · chiffres géants centrés · papier 2
curée
key-metric-grid--hero-center-paper-2
KPI clés · trois colonnes · dense · papier 2
curée
key-metric-grid--compact-3col-paper-2
KPI clés · grille · encre
curée
key-metric-grid--ink
KPI clés · chiffres géants centrés · encre
curée
key-metric-grid--ink-hero-center
key-metric-grid · ligne en ligne
générée
key-metric-grid--inline-row
key-metric-grid · grille uniforme
générée
key-metric-grid--grid-uniform
key-metric-grid · grand nombre split
générée
key-metric-grid--big-number-split
key-metric-grid · bento
générée
key-metric-grid--bento
key-metric-grid · avec contexte
générée
key-metric-grid--with-context
key-metric-grid · bandeau défilant
générée
key-metric-grid--ticker
key-metric-grid · paire comparée
générée
key-metric-grid--comparison-pair
key-metric-grid · ligne KPI
générée
key-metric-grid--kpi-row
key-metric-grid · double mesure
générée
key-metric-grid--dual-metric
key-metric-grid · barres de progression
générée
key-metric-grid--progress-bars

Comparer les déclinaisons · 19

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.

KPI clés · grille · fond papier 2
curée
key-metric-grid--paper-2
background:paper-2
Ouvrir dans le builder
KPI clés · grille · fond papier 3
curée
key-metric-grid--paper-3
background:paper-3
Ouvrir dans le builder
KPI clés · trois colonnes
curée
key-metric-grid--3col
columns:3
Ouvrir dans le builder
KPI clés · deux colonnes · chiffres géants
curée
key-metric-grid--2col-hero
columns:2size:hero
Ouvrir dans le builder
KPI clés · alignés au centre
curée
key-metric-grid--center
align:center
Ouvrir dans le builder
KPI clés · chiffres géants centrés · papier 2
curée
key-metric-grid--hero-center-paper-2
background:paper-2size:heroalign:center
Ouvrir dans le builder
KPI clés · trois colonnes · dense · papier 2
curée
key-metric-grid--compact-3col-paper-2
background:paper-2columns:3density:compact
Ouvrir dans le builder
KPI clés · grille · encre
curée
key-metric-grid--ink
background:inkvariant:inverted
Ouvrir dans le builder
KPI clés · chiffres géants centrés · encre
curée
key-metric-grid--ink-hero-center
background:inksize:heroalign:centercolumns:2variant:inverted
Ouvrir dans le builder
key-metric-grid · ligne en ligne
générée
key-metric-grid--inline-row
layout:inline-row
Ouvrir dans le builder
key-metric-grid · grille uniforme
générée
key-metric-grid--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
key-metric-grid · grand nombre split
générée
key-metric-grid--big-number-split
layout:big-number-split
Ouvrir dans le builder
key-metric-grid · bento
générée
key-metric-grid--bento
layout:bento
Ouvrir dans le builder
key-metric-grid · avec contexte
générée
key-metric-grid--with-context
layout:with-context
Ouvrir dans le builder
key-metric-grid · bandeau défilant
générée
key-metric-grid--ticker
layout:ticker
Ouvrir dans le builder
key-metric-grid · paire comparée
générée
key-metric-grid--comparison-pair
layout:comparison-pair
Ouvrir dans le builder
key-metric-grid · ligne KPI
générée
key-metric-grid--kpi-row
layout:kpi-row
Ouvrir dans le builder
key-metric-grid · double mesure
générée
key-metric-grid--dual-metric
layout:dual-metric
Ouvrir dans le builder
key-metric-grid · barres de progression
générée
key-metric-grid--progress-bars
layout:progress-bars
Ouvrir dans le builder

Sections liées

Même famille

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.

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

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.

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

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.

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.

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.

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.

Code

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

{
  "type": "key-metric-grid",
  "background": "paper",
  "eyebrow_fr": "Résultats mesurés",
  "eyebrow_en": "Measured results",
  "title_fr": "Ce que le pipeline produit sur 12 mois",
  "title_en": "What the pipeline delivers over 12 months",
  "columns": 4,
  "size": "lg",
  "align": "left",
  "variant": "default",
  "metrics": [
    {
      "value": "×2,4",
      "label_fr": "leads qualifiés",
      "label_en": "qualified leads",
      "delta": "+62 %",
      "trend": "up"
    },
    {
      "value": "€840K",
      "label_fr": "pipeline généré",
      "label_en": "pipeline generated",
      "delta": "+38 %",
      "trend": "up"
    },
    {
      "value": "11 j",
      "label_fr": "cycle de vente moyen",
      "label_en": "average sales cycle",
      "delta": "-9 j",
      "trend": "down"
    },
    {
      "value": "94 %",
      "label_fr": "données à jour",
      "label_en": "data kept current",
      "trend": "flat"
    }
  ]
}

Pour un agent / MCP

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

/library/section/key-metric-grid.json

Chemin du détail machine

/library/section/key-metric-grid.json