Narrative Sections

hover-reveal-words

stable Bibliothèque Contenu inline (instance)

Raconter une histoire

Prose editoriale dont certains mots declencheurs revelent une vignette image au survol (desktop, suit le curseur) ou au tap (mobile, vignette inline). Accessible au clavier.

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

Raconter une histoire

Rôle de page

Corps

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
`placement`	Présentation	`object`	Non	·	·
`contentAlign`	Présentation	`enum`	Non	·	start · center
`measure`	Présentation	`enum`	Non	·	prose · read · wide
`thumbRatio`	Contenu	`enum`	Non	·	4-3 · 1-1 · 3-2 · 4-5
`proseScale`	Contenu	`enum`	Non	·	lede · body
`kicker`	Contenu	`text`	Non	fr / en	·
`prose`	Contenu	`text`	Oui	fr / en	·
`triggers`	Contenu	`array`	Oui	·	1..8

Déclinaisons · 16

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

Mots révélés · papier 2
curée
hover-reveal-words--paper-2
Mots révélés · encre
curée
hover-reveal-words--ink
Mots révélés · contenu centré
curée
hover-reveal-words--center
Mots révélés · mesure resserrée
curée
hover-reveal-words--wide
hover-reveal-words · prose
générée
hover-reveal-words--prose
hover-reveal-words · deux colonnes
générée
hover-reveal-words--two-col
hover-reveal-words · liste
générée
hover-reveal-words--list
hover-reveal-words · lignes séparées
générée
hover-reveal-words--rows-divided
hover-reveal-words · chapeau + aparté
générée
hover-reveal-words--lead-aside
hover-reveal-words · lettrine
générée
hover-reveal-words--drop-cap
hover-reveal-words · citation détachée
générée
hover-reveal-words--pull-quote
hover-reveal-words · énoncé centré
générée
hover-reveal-words--centered-statement
hover-reveal-words · note de marge
générée
hover-reveal-words--sidenote
hover-reveal-words · prose numérotée
générée
hover-reveal-words--numbered-prose
hover-reveal-words · chapeau 2 colonnes
générée
hover-reveal-words--two-col-lead
hover-reveal-words · grand énoncé
générée
hover-reveal-words--statement-big

Comparer les déclinaisons · 16

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.

Mots révélés · papier 2
curée
hover-reveal-words--paper-2
background:paper-2
Ouvrir dans le builder
Mots révélés · encre
curée
hover-reveal-words--ink
background:ink
Ouvrir dans le builder
Mots révélés · contenu centré
curée
hover-reveal-words--center
contentAlign:center
Ouvrir dans le builder
Mots révélés · mesure resserrée
curée
hover-reveal-words--wide
measure:wide
Ouvrir dans le builder
hover-reveal-words · prose
générée
hover-reveal-words--prose
layout:prose
Ouvrir dans le builder
hover-reveal-words · deux colonnes
générée
hover-reveal-words--two-col
layout:two-col
Ouvrir dans le builder
hover-reveal-words · liste
générée
hover-reveal-words--list
layout:list
Ouvrir dans le builder
hover-reveal-words · lignes séparées
générée
hover-reveal-words--rows-divided
layout:rows-divided
Ouvrir dans le builder
hover-reveal-words · chapeau + aparté
générée
hover-reveal-words--lead-aside
layout:lead-aside
Ouvrir dans le builder
hover-reveal-words · lettrine
générée
hover-reveal-words--drop-cap
layout:drop-cap
Ouvrir dans le builder
hover-reveal-words · citation détachée
générée
hover-reveal-words--pull-quote
layout:pull-quote
Ouvrir dans le builder
hover-reveal-words · énoncé centré
générée
hover-reveal-words--centered-statement
layout:centered-statement
Ouvrir dans le builder
hover-reveal-words · note de marge
générée
hover-reveal-words--sidenote
layout:sidenote
Ouvrir dans le builder
hover-reveal-words · prose numérotée
générée
hover-reveal-words--numbered-prose
layout:numbered-prose
Ouvrir dans le builder
hover-reveal-words · chapeau 2 colonnes
générée
hover-reveal-words--two-col-lead
layout:two-col-lead
Ouvrir dans le builder
hover-reveal-words · grand énoncé
générée
hover-reveal-words--statement-big
layout:statement-big
Ouvrir dans le builder

Sections liées

Même famille

author-byline stable

Ligne auteur compacte E-E-A-T sous un h1 d'article : avatar optionnel, nom, rôle, dates de publication et mise à jour, lien vers la page profil. Beaucoup plus léger qu'un hero auteur.

prose Team Sections Apparition au scrollDéfilementImage +2 15 décl.

definition-extract stable

Bloc GEO « format extractible » : kicker mono, gros statement serif avec le terme défini en accent, rangée de pills, puis un bandeau de specs mono. Sobre, fond paper, pensé pour la citation par les moteurs génératifs.

prose Editorial Sections Apparition au scrollDéfilementBadge +3 21 décl.

direct-answer stable

Bloc GEO « réponse directe » en tête de page : reformule une question implicite, définit éventuellement une entité, puis délivre une réponse directe de 2 à 4 phrases en colonne de lecture. Sobre, éditorial, fond alterné.

prose Editorial Sections Badge1 colonne 15 décl.

editorial-callout stable

Encadré éditorial composant l'atome Callout (info, citation, note, avertissement, manifeste) : hairline accent, citation source optionnelle, tailles et alignements. Pour ponctuer une prose.

prose Editorial Sections Citation1 colonne 20 décl.

editorial-dingbat-rule stable

Séparateur ornemental éditorial composant l'atome Dingbat (fleuron, asterisme, fin d'article, règle) : transition entre chapitres avec légendes optionnelles au-dessus et en dessous.

prose Editorial Sections Centré 19 décl.

editorial-dropcap-prose stable

Ouverture d'article éditoriale composant l'atome DropCap : initiale magnifiée (serif, mono ou accent) sur un paragraphe d'accroche, suivie de paragraphes de prose. Pour entrer dans un long-form.

prose Editorial Sections 1 colonne 16 décl.

Même catégorie

definition-extract stable

prose Editorial Sections Apparition au scrollDéfilementBadge +3 21 décl.

direct-answer stable

prose Editorial Sections Badge1 colonne 15 décl.

editorial-callout stable

Encadré éditorial composant l'atome Callout (info, citation, note, avertissement, manifeste) : hairline accent, citation source optionnelle, tailles et alignements. Pour ponctuer une prose.

prose Editorial Sections Citation1 colonne 20 décl.

editorial-dingbat-rule stable

Séparateur ornemental éditorial composant l'atome Dingbat (fleuron, asterisme, fin d'article, règle) : transition entre chapitres avec légendes optionnelles au-dessus et en dessous.

prose Editorial Sections Centré 19 décl.

editorial-dropcap-prose stable

Ouverture d'article éditoriale composant l'atome DropCap : initiale magnifiée (serif, mono ou accent) sur un paragraphe d'accroche, suivie de paragraphes de prose. Pour entrer dans un long-form.

prose Editorial Sections 1 colonne 16 décl.

editorial-prose stable

Wrapper de prose éditoriale tokenisé : colonne de lecture (largeur prose ou wide), fond alterné, héberge un contenu long via slot (corps MDX). Préserve la typographie du DS sans réécrire le texte.

prose Editorial Sections 1 colonne 16 décl.

Similaires

prose-aside stable

Colonne de prose editoriale (corps MDX) precedee d’un kicker en aside. Le corps vit dans le MDX, pas le frontmatter. Generique pour tout bloc prose + eyebrow lateral.

prose Editorial Sections Apparition au scroll2 colonnes 15 décl.

bordered-pullquote stable

Citation manifeste a filet gauche : corps large avec accent italique + signature mono. Rendu du corps en HTML (accent <i>).

quote Manifesto Sections Apparition au scrollCitation1 colonne 12 décl.

rich-text stable

Section de corps riche : un corps Markdown bilingue rendu en HTML au build avec les styles prose du design system. Edition de corps editorial in-context sans backend (le Markdown vit dans le document de page, versionne avec le code). Titres, listes, liens, gras/italique ; mesure de ligne bornee ; variante ink lisible.

prose Editorial Sections Apparition au scrollSurvolListe +1 15 décl.

photo-cluster stable

Composition editoriale : photo lead + grappe de photos decalees (layouts lead-cluster, scatter, duo).

scroll-interactive Feature Sections Apparition au scrollDéfilementPlusieurs images +1 17 décl.

pain-severity-list stable

Liste éditoriale de pain-points sur fond ink, classés par sévérité : chaque item porte un label severity vertical (mono) et un glyphe (◆▲●○), un titre serif, une description, et une ligne mono « → correctif ». Séparateurs hairline, reveal-stagger.

prose Feature Sections Apparition au scrollDéfilementListe +2 21 décl.

editorial-write-feed stable

Feed éditorial en lignes cliquables (EditorialWriteRow) : date, tag, texte et flèche par ligne, tone paper ou ink, lien meta type /feed.xml.

prose Table Sections Apparition au scrollDéfilement1 colonne 14 décl.

Code

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

{
  "type": "hover-reveal-words",
  "background": "paper",
  "contentAlign": "start",
  "measure": "read",
  "thumbRatio": "4-3",
  "proseScale": "lede",
  "kicker_fr": "Notre conviction",
  "kicker_en": "What we believe",
  "prose_fr": "L'intelligence artificielle ne remplace pas votre métier, elle le prolonge. Bien posée, elle transforme la stratégie en exécution, fait gagner du temps là où il compte, et rend chaque décision plus nette. Mal posée, elle ajoute du bruit. Notre travail est de construire le dispositif qui sert vraiment votre équipe.",
  "prose_en": "Artificial intelligence does not replace your craft, it extends it. Set up well, it turns strategy into execution, saves time where it matters, and makes every decision sharper. Set up badly, it just adds noise. Our job is to build the system that genuinely serves your team.",
  "triggers": [
    {
      "word_fr": "stratégie",
      "word_en": "strategy",
      "media_src": "/images/illustrations/ds/chess-paper.webp",
      "media_alt_fr": "Stratégie posée comme un jeu d'échecs",
      "media_alt_en": "Strategy framed like a chess game"
    },
    {
      "word_fr": "temps",
      "word_en": "time",
      "media_src": "/images/illustrations/ds/car-on-the-road-paper.webp",
      "media_alt_fr": "Gagner du temps sur la route",
      "media_alt_en": "Saving time on the road"
    },
    {
      "word_fr": "décision",
      "word_en": "decision",
      "media_src": "/images/illustrations/ds/no-no-yes-paper.webp",
      "media_alt_fr": "Une décision nette, oui plutôt que non",
      "media_alt_en": "A sharp decision, yes over no"
    },
    {
      "word_fr": "équipe",
      "word_en": "team",
      "media_src": "/images/illustrations/ds/men-on-hand-paper.webp",
      "media_alt_fr": "Une équipe qui avance ensemble",
      "media_alt_en": "A team moving forward together"
    }
  ]
}

Pour un agent / MCP

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

/library/section/hover-reveal-words.json

Chemin du détail machine

/library/section/hover-reveal-words.json