Feature Sections

photo-cluster

stable Bibliothèque Contenu inline (instance)

Raconter une histoire, Établir la crédibilité

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

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 Établir la crédibilité

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	·
`note`	Contenu	`text`	Non	fr / en	·
`layout`	Présentation	`enum`	Non	·	lead-cluster · scatter · duo
`lead`	Contenu	`object`	Oui	·	·
`photos`	Contenu	`array`	Oui	·	1..5

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.

Grappe photos · papier · grappe vedette
curée
photo-cluster--paper-lead-cluster
Grappe photos · papier · dispersée
curée
photo-cluster--paper-scatter
Grappe photos · papier 2 · duo
curée
photo-cluster--paper-2-duo
Grappe photos · encre · grappe vedette
curée
photo-cluster--ink-lead-cluster
Grappe photos · encre · dispersée
curée
photo-cluster--ink-scatter
photo-cluster · grille auto
générée
photo-cluster--grid-auto
photo-cluster · mosaïque
générée
photo-cluster--mosaic
photo-cluster · masonry
générée
photo-cluster--masonry
photo-cluster · matrice 3x3
générée
photo-cluster--matrix-3x3
photo-cluster · matrice 4x4
générée
photo-cluster--matrix-4x4
photo-cluster · grille uniforme
générée
photo-cluster--grid-uniform
photo-cluster · vedette + split
générée
photo-cluster--featured-split
photo-cluster · défilement aperçu
générée
photo-cluster--peek-scroll
photo-cluster · masonry 3 colonnes
générée
photo-cluster--masonry-3
photo-cluster · paire pleine largeur
générée
photo-cluster--fullbleed-pair
photo-cluster · pellicule
générée
photo-cluster--filmstrip
photo-cluster · chevauchement
générée
photo-cluster--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.

Grappe photos · papier · grappe vedette
curée
photo-cluster--paper-lead-cluster
background:paper
Ouvrir dans le builder
Grappe photos · papier · dispersée
curée
photo-cluster--paper-scatter
background:paperlayout:scatter
Ouvrir dans le builder
Grappe photos · papier 2 · duo
curée
photo-cluster--paper-2-duo
background:paper-2layout:duo
Ouvrir dans le builder
Grappe photos · encre · grappe vedette
curée
photo-cluster--ink-lead-cluster
background:ink
Ouvrir dans le builder
Grappe photos · encre · dispersée
curée
photo-cluster--ink-scatter
background:inklayout:scatter
Ouvrir dans le builder
photo-cluster · grille auto
générée
photo-cluster--grid-auto
layout:grid-auto
Ouvrir dans le builder
photo-cluster · mosaïque
générée
photo-cluster--mosaic
layout:mosaic
Ouvrir dans le builder
photo-cluster · masonry
générée
photo-cluster--masonry
layout:masonry
Ouvrir dans le builder
photo-cluster · matrice 3x3
générée
photo-cluster--matrix-3x3
layout:matrix-3x3
Ouvrir dans le builder
photo-cluster · matrice 4x4
générée
photo-cluster--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
photo-cluster · grille uniforme
générée
photo-cluster--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
photo-cluster · vedette + split
générée
photo-cluster--featured-split
layout:featured-split
Ouvrir dans le builder
photo-cluster · défilement aperçu
générée
photo-cluster--peek-scroll
layout:peek-scroll
Ouvrir dans le builder
photo-cluster · masonry 3 colonnes
générée
photo-cluster--masonry-3
layout:masonry-3
Ouvrir dans le builder
photo-cluster · paire pleine largeur
générée
photo-cluster--fullbleed-pair
layout:fullbleed-pair
Ouvrir dans le builder
photo-cluster · pellicule
générée
photo-cluster--filmstrip
layout:filmstrip
Ouvrir dans le builder
photo-cluster · chevauchement
générée
photo-cluster--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.

scroll-gallery stable

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.

scroll-interactive Feature Sections Média collantFondu enchaînéApparition au scroll +6 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

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.

team-bio-grid stable

Grille d’équipe : photo, nom, rôle et bio courte par membre, en 2 à 4 colonnes alignées. Idéale pour une page À propos ou Équipe qui humanise la marque.

card-grid Team Sections SurvolImageIllustration au trait +4 19 décl.

about-story-split stable

Récit fondateur en deux colonnes : texte narratif de mission à gauche, timeline de jalons datés à droite. Raconte l’histoire de la marque sans verbiage.

split-media About Sections Illustration au traitListeFrise chronologique +3 17 décl.

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.

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.

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.

Code

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

{
  "type": "photo-cluster",
  "kicker_fr": "Agence · coulisses",
  "kicker_en": "Studio · behind the scenes",
  "h2_fr": "Un studio qui aime rester <i>simple</i>",
  "h2_en": "A studio that likes to stay <i>simple</i>",
  "lede_fr": "Pas de grands discours. On conçoit, on livre, on transfère. Le reste est du bruit.",
  "lede_en": "No grand speeches. We design, deliver, hand over. The rest is noise.",
  "note_fr": "Nous aimons rester simples.",
  "note_en": "We like to stay simple.",
  "layout": "lead-cluster",
  "lead": {
    "media_src": "/images/editorial/gentlemanhandcraftergoworknow.webp",
    "media_alt_fr": "Atelier au travail",
    "media_alt_en": "Studio at work"
  },
  "photos": [
    {
      "media_src": "/images/editorial/menonhand.webp",
      "media_alt_fr": "Collaboration",
      "media_alt_en": "Collaboration",
      "caption_fr": "Au travail",
      "caption_en": "At work"
    },
    {
      "media_src": "/images/editorial/chess-style-16.webp",
      "media_alt_fr": "Stratégie",
      "media_alt_en": "Strategy",
      "caption_fr": "Stratégie",
      "caption_en": "Strategy"
    },
    {
      "media_src": "/images/editorial/womancomputer17.webp",
      "media_alt_fr": "Production",
      "media_alt_en": "Production",
      "caption_fr": "Production",
      "caption_en": "Production"
    }
  ]
}

Pour un agent / MCP

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

/library/section/photo-cluster.json

Chemin du détail machine

/library/section/photo-cluster.json