hero-numeral-cover · Composant Waimia

Instances sur le site

Global 0 instance en page composable

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

Aperçu

Comment l'utiliser

Intention

Énoncer la proposition de valeur

Rôle de page

Héros

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
`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	·	·
`columns`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · 5 · 6 · auto
`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	·	·
`kicker`	Contenu	`text`	Non	fr / en	·
`h1`	Contenu	`text`	Oui	fr / en	·
`lede`	Contenu	`text`	Oui	fr / en	·
`cta_sub`	Contenu	`text`	Non	fr / en	·
`cta_primary`	Contenu	`object`	Oui	·	·
`cta_secondary`	Contenu	`object`	Non	·	·
`numeral_value`	Contenu	`text`	Oui	·	·
`numeral_cap`	Contenu	`text`	Oui	fr / en	·
`numeral_sub`	Contenu	`text`	Non	fr / en	·

Déclinaisons · 14

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 1 curée, 13 générées. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.

Hero couverture chiffrée · encre
curée
hero-numeral-cover--ink
hero-numeral-cover · split
générée
hero-numeral-cover--split
hero-numeral-cover · centré
générée
hero-numeral-cover--centered
hero-numeral-cover · masthead
générée
hero-numeral-cover--masthead
hero-numeral-cover · entonnoir
générée
hero-numeral-cover--funnel
hero-numeral-cover · image pleine
générée
hero-numeral-cover--full-bleed-image
hero-numeral-cover · empilé
générée
hero-numeral-cover--stacked
hero-numeral-cover · minimal
générée
hero-numeral-cover--minimal
hero-numeral-cover · avec formulaire
générée
hero-numeral-cover--with-form
hero-numeral-cover · split inversé
générée
hero-numeral-cover--split-reverse
hero-numeral-cover · fond vidéo
générée
hero-numeral-cover--video-bg
hero-numeral-cover · centré étroit
générée
hero-numeral-cover--centered-narrow
hero-numeral-cover · avec bande de logos
générée
hero-numeral-cover--with-logos-strip

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.

Hero couverture chiffrée · encre
curée
hero-numeral-cover--ink
background:ink
Ouvrir dans le builder
hero-numeral-cover · split
générée
hero-numeral-cover--split
layout:split
Ouvrir dans le builder
hero-numeral-cover · centré
générée
hero-numeral-cover--centered
layout:centered
Ouvrir dans le builder
hero-numeral-cover · masthead
générée
hero-numeral-cover--masthead
layout:masthead
Ouvrir dans le builder
hero-numeral-cover · entonnoir
générée
hero-numeral-cover--funnel
layout:funnel
Ouvrir dans le builder
hero-numeral-cover · image pleine
générée
hero-numeral-cover--full-bleed-image
layout:full-bleed-image
Ouvrir dans le builder
hero-numeral-cover · empilé
générée
hero-numeral-cover--stacked
layout:stacked
Ouvrir dans le builder
hero-numeral-cover · minimal
générée
hero-numeral-cover--minimal
layout:minimal
Ouvrir dans le builder
hero-numeral-cover · avec formulaire
générée
hero-numeral-cover--with-form
layout:with-form
Ouvrir dans le builder
hero-numeral-cover · split inversé
générée
hero-numeral-cover--split-reverse
layout:split-reverse
Ouvrir dans le builder
hero-numeral-cover · fond vidéo
générée
hero-numeral-cover--video-bg
layout:video-bg
Ouvrir dans le builder
hero-numeral-cover · centré étroit
générée
hero-numeral-cover--centered-narrow
layout:centered-narrow
Ouvrir dans le builder
hero-numeral-cover · avec bande de logos
générée
hero-numeral-cover--with-logos-strip
layout:with-logos-strip
Ouvrir dans le builder

Sections liées

Même famille

hero-academy-hub stable

Hero hub académie : kicker mono, h1 display, lede et bande de stats mono (cours, parcours, alumni).

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-asymmetric-grid stable

Héro plein écran en grille multi-lignes asymétrique : titre serif pleine largeur, rangée 2 colonnes (label + lede + 2 CTA à gauche, label + puces fléchées à droite), puis bande de 4 KPI dont la dernière cellule est inversée en ink. Variante paper et ink, responsive.

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

hero-atlas stable

Hero Atlas en deux colonnes avec signature grid, copy éditoriale, CTAs et mini-map des quatre piliers.

hero Hero Header Sections Apparition au scrollDéfilementImage de fond +4 16 décl.

hero-author stable

Hero de page auteur : 2-col copy/portrait, breadcrumb équipe, role eyebrow, h1 split prénom+nom italic accent, lede display.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-baseline-stats stable

Héro plein écran à impact typographique : kicker, titre serif géant et lede court en tête, rangée de 4 KPI poussée en baseline (séparée par une hairline forte). CTA optionnel, pas de média. Variante paper et ink, responsive (KPI 2 colonnes sur mobile).

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

hero-capability-band stable

Héro plein écran : titre serif accent et lede alignés à gauche (~70 % de large), puis une bande de capacités asymétrique pleine largeur de 5 cellules dont la 3e (large, accent) porte un KPI serif, les 4 autres des capacités mono. Variante paper et ink, responsive.

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

Même catégorie

hero-academy-hub stable

Hero hub académie : kicker mono, h1 display, lede et bande de stats mono (cours, parcours, alumni).

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-asymmetric-grid stable

Héro plein écran en grille multi-lignes asymétrique : titre serif pleine largeur, rangée 2 colonnes (label + lede + 2 CTA à gauche, label + puces fléchées à droite), puis bande de 4 KPI dont la dernière cellule est inversée en ink. Variante paper et ink, responsive.

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

hero-atlas stable

Hero Atlas en deux colonnes avec signature grid, copy éditoriale, CTAs et mini-map des quatre piliers.

hero Hero Header Sections Apparition au scrollDéfilementImage de fond +4 16 décl.

hero-author stable

Hero de page auteur : 2-col copy/portrait, breadcrumb équipe, role eyebrow, h1 split prénom+nom italic accent, lede display.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-baseline-stats stable

Héro plein écran à impact typographique : kicker, titre serif géant et lede court en tête, rangée de 4 KPI poussée en baseline (séparée par une hairline forte). CTA optionnel, pas de média. Variante paper et ink, responsive (KPI 2 colonnes sur mobile).

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

hero-capability-band stable

Héro plein écran : titre serif accent et lede alignés à gauche (~70 % de large), puis une bande de capacités asymétrique pleine largeur de 5 cellules dont la 3e (large, accent) porte un KPI serif, les 4 autres des capacités mono. Variante paper et ink, responsive.

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

Similaires

hero-editorial-kpi stable

Héro plein écran éditorial asymétrique (~65/35) : colonne dominante (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail léger à droite avec 3 KPI serif verticaux séparés par hairlines. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +4 14 décl.

hero-tech-signature stable

Héro plein écran asymétrique (~68/32) à signature dominante (trame éditoriale + sigil) : colonne principale (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec 2 grands numéraux serif. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +4 14 décl.

hero-scope-minimap stable

Héro plein écran asymétrique (~60/40) : colonne dominante (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec une mini-map de 6 capacités en 2 colonnes (label mono accent + items), hairlines. Montre le périmètre, pas un média. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +3 14 décl.

hero-summary-rail stable

Héro plein écran asymétrique (~70/30) façon revue : colonne principale (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec un sommaire typographique de 3 entrées (label mono accent + titre serif court + sous-ligne). Zéro média. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +3 14 décl.

hero-card-cover stable

Héro plein écran en deux colonnes : discours éditorial (kicker, titre serif, lede, badges pills, 2 CTA) à gauche, carte ink sombre (média line-art + mini-KPI) à droite. La carte reste sombre en mode paper. Variante paper et ink, responsive (1 colonne sur mobile).

hero Hero Header Sections SurvolImageIllustration au trait +8 14 décl.

hero-thin-media stable

Héro plein écran très asymétrique (~72/28) : colonne dominante (kicker, titre serif accent, lede, badges pills mono, 2 CTA), rail droit avec une bande média line-art verticale mince (currentColor, lisible paper et ink). Variante paper et ink, responsive.

hero Hero Header Sections ImageIllustration au traitBoutons +5 14 décl.

Code

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

{
  "type": "hero-numeral-cover",
  "kicker_fr": "§ 01 · Service",
  "kicker_en": "§ 01 · Service",
  "h1_fr": "L'IA <i class=\"acc\">intégrée</i> à vos<br />opérations, <i>sans friction</i>.",
  "h1_en": "AI <i class=\"acc\">woven into</i> your<br />operations, <i>frictionless</i>.",
  "lede_fr": "On installe Claude Code dans vos outils, vos données et vos flux. Vos équipes gardent la main, <i>l'IA fait le reste</i>.",
  "lede_en": "We embed Claude Code into your tools, your data and your flows. Your teams stay in control, <i>AI handles the rest</i>.",
  "cta_sub_fr": "Réponse sous 48 h. <i>Sans engagement.</i>",
  "cta_sub_en": "Reply within 48 h. <i>No commitment.</i>",
  "cta_primary": {
    "label_fr": "Démarrer un diagnostic",
    "label_en": "Start a diagnostic",
    "href": "/contact",
    "variant": "primary"
  },
  "cta_secondary": {
    "label_fr": "Voir la méthode",
    "label_en": "See the method",
    "href": "#methode",
    "variant": "ghost"
  },
  "numeral_value": "100 %",
  "numeral_cap_fr": "de vos données restent chez vous",
  "numeral_cap_en": "of your data stays with you",
  "numeral_sub_fr": "0 donnée envoyée à un tiers",
  "numeral_sub_en": "0 data sent to a third party"
}

Pour un agent / MCP

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

/library/section/hero-numeral-cover.json

Chemin du détail machine

/library/section/hero-numeral-cover.json