Feature Sections

scroll-gallery

stable Bibliothèque Contenu inline (instance)

Montrer les réalisations, Présenter les capacités

Liste sticky a gauche, cadre media a droite dont l'image change en fondu au scroll. Ideal pour presenter des domaines d'expertise avec un visuel par item.

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

Montrer les réalisations Présenter les capacités

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
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`media_side`	Présentation	`enum`	Non	·	left · right
`items`	Contenu	`array`	Oui	·	2..6

Déclinaisons · 17

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

Galerie scroll · papier · média à droite
curée
scroll-gallery--paper-right
Galerie scroll · papier · média à gauche
curée
scroll-gallery--paper-left
Galerie scroll · papier 2 · média à droite
curée
scroll-gallery--paper-2-right
Galerie scroll · encre · média à gauche
curée
scroll-gallery--ink-left
Galerie scroll · encre · média à droite
curée
scroll-gallery--ink-right
scroll-gallery · grille auto
générée
scroll-gallery--grid-auto
scroll-gallery · mosaïque
générée
scroll-gallery--mosaic
scroll-gallery · masonry
générée
scroll-gallery--masonry
scroll-gallery · matrice 3x3
générée
scroll-gallery--matrix-3x3
scroll-gallery · matrice 4x4
générée
scroll-gallery--matrix-4x4
scroll-gallery · grille uniforme
générée
scroll-gallery--grid-uniform
scroll-gallery · vedette + split
générée
scroll-gallery--featured-split
scroll-gallery · défilement aperçu
générée
scroll-gallery--peek-scroll
scroll-gallery · masonry 3 colonnes
générée
scroll-gallery--masonry-3
scroll-gallery · paire pleine largeur
générée
scroll-gallery--fullbleed-pair
scroll-gallery · pellicule
générée
scroll-gallery--filmstrip
scroll-gallery · chevauchement
générée
scroll-gallery--overlap

Comparer les déclinaisons · 17

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.

Galerie scroll · papier · média à droite
curée
scroll-gallery--paper-right
background:papermedia_side:right
Ouvrir dans le builder
Galerie scroll · papier · média à gauche
curée
scroll-gallery--paper-left
background:papermedia_side:left
Ouvrir dans le builder
Galerie scroll · papier 2 · média à droite
curée
scroll-gallery--paper-2-right
background:paper-2media_side:right
Ouvrir dans le builder
Galerie scroll · encre · média à gauche
curée
scroll-gallery--ink-left
background:inkmedia_side:left
Ouvrir dans le builder
Galerie scroll · encre · média à droite
curée
scroll-gallery--ink-right
background:inkmedia_side:right
Ouvrir dans le builder
scroll-gallery · grille auto
générée
scroll-gallery--grid-auto
layout:grid-auto
Ouvrir dans le builder
scroll-gallery · mosaïque
générée
scroll-gallery--mosaic
layout:mosaic
Ouvrir dans le builder
scroll-gallery · masonry
générée
scroll-gallery--masonry
layout:masonry
Ouvrir dans le builder
scroll-gallery · matrice 3x3
générée
scroll-gallery--matrix-3x3
layout:matrix-3x3
Ouvrir dans le builder
scroll-gallery · matrice 4x4
générée
scroll-gallery--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
scroll-gallery · grille uniforme
générée
scroll-gallery--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
scroll-gallery · vedette + split
générée
scroll-gallery--featured-split
layout:featured-split
Ouvrir dans le builder
scroll-gallery · défilement aperçu
générée
scroll-gallery--peek-scroll
layout:peek-scroll
Ouvrir dans le builder
scroll-gallery · masonry 3 colonnes
générée
scroll-gallery--masonry-3
layout:masonry-3
Ouvrir dans le builder
scroll-gallery · paire pleine largeur
générée
scroll-gallery--fullbleed-pair
layout:fullbleed-pair
Ouvrir dans le builder
scroll-gallery · pellicule
générée
scroll-gallery--filmstrip
layout:filmstrip
Ouvrir dans le builder
scroll-gallery · chevauchement
générée
scroll-gallery--overlap
layout:overlap
Ouvrir dans le builder

Sections liées

Même famille

horizontal-showcase stable

Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.

scroll-interactive Feature Sections Défilement horizontalApparition au scrollDéfilement +6 16 décl.

hover-reveal-list stable

Liste editoriale qui revele l'image du projet au survol, dans un carre cadre (image qui suit le curseur ou centree).

scroll-interactive Feature Sections Révélation au survolApparition au scrollSurvol +5 17 décl.

media-bento stable

Bento media asymetrique : tuiles image avec grand titre superpose et zoom au survol (layouts feature-2, quad, mosaic).

scroll-interactive Feature Sections Zoom au survolApparition au scrollSurvol +4 24 décl.

media-swap-band stable

Bande 2 ou 3 colonnes dont les images changent en fondu (auto ou au survol), avec CTA.

scroll-interactive Feature Sections Fondu enchaînéRotation automatiqueApparition au scroll +7 17 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.

stack-cards stable

Cartes numerotees qui se superposent en s'empilant au scroll (effet stack sticky, CSS pur). Ideal pour une methode en plusieurs temps.

scroll-interactive Feature Sections Cartes empiléesApparition au scrollDéfilement +6 16 décl.

Même catégorie

architecture-diagram stable

Diagramme d'architecture signature : N canaux d'entrée vers un système central et M sorties, avec boucle d'amélioration continue.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +1 23 décl.

bento-grid stable

Mosaique bento asymetrique de 5 cellules (1 grande 2x2 + 4 petites) pour valoriser les capacites cles avec une mise en page moderne.

bento Feature Sections IcônesCartesListe +1 26 décl.

challenges-grid stable

Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.

card-grid Feature Sections SurvolIllustration au traitIcônes +4 16 décl.

coming-soon-pills stable

Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.

list Feature Sections ListeBadge1 colonne 16 décl.

commitments-grid stable

Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.

decision-list stable

Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.

list Feature Sections Apparition au scrollDéfilementListe +1 17 décl.

Similaires

sticky-scroll-storytelling stable

Storytelling au scroll : rail de texte sticky dont l'etape active passe en accent, colonne media sticky dont l'image change en fondu. Mobile = stepper empile.

scroll-interactive Feature Sections Média collantApparition au scrollFondu enchaîné +7 12 décl.

guarantee-block stable

Bloc garantie pour expliciter les engagements, réduire le risque perçu et rassurer.

band Feature Sections Liste2 colonnesMédia à droite +1 17 décl.

editorial-split-grid stable

Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 17 décl.

tech-capabilities-specs stable

Inventaire technique en table spec (capacité, description, statut) avec en-tête kicker et aside.

table Feature Sections Défilement horizontalApparition au scrollSurvol +6 9 décl.

why-stalls stable

Section éditoriale "pourquoi X cale" : chapter label sticky à gauche + N FIG rows à droite avec row-lines.

card-grid Feature Sections DéfilementIllustration au trait2 colonnes +2 14 décl.

feature-tabs stable

Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.

tabs Feature Sections Défilement horizontalSurvolClic (bascule) +9 7 décl.

Code

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

{
  "type": "scroll-gallery",
  "kicker_fr": "Domaines · expertise",
  "kicker_en": "Domains · expertise",
  "h2_fr": "Là où l'IA crée le plus de <i>valeur</i>",
  "h2_en": "Where AI creates the most <i>value</i>",
  "lede_fr": "Cinq terrains où un système bien câblé change la donne, du premier contact client au pilotage interne.",
  "lede_en": "Five areas where a well wired system changes the game, from first client contact to internal steering.",
  "items": [
    {
      "index_fr": "01",
      "index_en": "01",
      "title_fr": "Acquisition",
      "title_en": "Acquisition",
      "body_fr": "Capter, qualifier et convertir la demande sans multiplier les outils ni les saisies manuelles.",
      "body_en": "Capture, qualify and convert demand without multiplying tools or manual entry.",
      "media_src": "/images/themes/theme-acquisition.webp",
      "media_alt_fr": "Illustration : acquisition",
      "media_alt_en": "Illustration: acquisition"
    },
    {
      "index_fr": "02",
      "index_en": "02",
      "title_fr": "Productivité interne",
      "title_en": "Internal productivity",
      "body_fr": "Automatiser les tâches répétitives et rendre chaque équipe plus rapide sur ce qui compte.",
      "body_en": "Automate repetitive tasks and make every team faster on what matters.",
      "media_src": "/images/themes/theme-productivite.webp",
      "media_alt_fr": "Illustration : productivité",
      "media_alt_en": "Illustration: productivity"
    },
    {
      "index_fr": "03",
      "index_en": "03",
      "title_fr": "Contenu & SEO",
      "title_en": "Content & SEO",
      "body_fr": "Produire un contenu qui se classe sur Google et se fait citer par les IA génératives.",
      "body_en": "Produce content that ranks on Google and gets cited by generative AI.",
      "media_src": "/images/themes/theme-contenu-seo.webp",
      "media_alt_fr": "Illustration : contenu et SEO",
      "media_alt_en": "Illustration: content and SEO"
    },
    {
      "index_fr": "04",
      "index_en": "04",
      "title_fr": "Support client",
      "title_en": "Client support",
      "body_fr": "Répondre plus vite et mieux, en gardant la main sur le ton et la qualité.",
      "body_en": "Answer faster and better, keeping control over tone and quality.",
      "media_src": "/images/themes/theme-support-client.webp",
      "media_alt_fr": "Illustration : support client",
      "media_alt_en": "Illustration: client support"
    },
    {
      "index_fr": "05",
      "index_en": "05",
      "title_fr": "Pilotage & finance",
      "title_en": "Steering & finance",
      "body_fr": "Voir clair dans les chiffres et décider sur des données fraîches, pas sur des tableaux figés.",
      "body_en": "See clearly in the numbers and decide on fresh data, not frozen spreadsheets.",
      "media_src": "/images/themes/theme-finance.webp",
      "media_alt_fr": "Illustration : pilotage et finance",
      "media_alt_en": "Illustration: steering and finance"
    }
  ]
}

Pour un agent / MCP

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

/library/section/scroll-gallery.json

Chemin du détail machine

/library/section/scroll-gallery.json