Feature Sections

media-bento

stable Bibliothèque Contenu inline (instance)

Montrer les réalisations

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

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

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
`density`	Présentation	`enum`	Non	·	compact · base · ample
`contentAlign`	Présentation	`enum`	Non	·	start · center · end
`placement`	Présentation	`object`	Non	·	·
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`layout`	Présentation	`enum`	Non	·	feature-2 · quad · mosaic · bento-feature · matrix-2x2 · matrix-3x3 · grid-uniform
`columns`	Présentation	`enum`	Non	·	2 · 3 · 4 · auto
`itemHeight`	Présentation	`enum`	Non	·	auto · even · square · video
`tiles`	Contenu	`array`	Oui	·	2..6

Déclinaisons · 24

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

Bento média · papier · une vedette
curée
media-bento--paper-feature-2
Bento média · papier · quadrillage
curée
media-bento--paper-quad
Bento média · papier 2 · mosaïque
curée
media-bento--paper-2-mosaic
Bento média · encre · une vedette
curée
media-bento--ink-feature-2
Bento média · encre · mosaïque
curée
media-bento--ink-mosaic
Bento média · tuile vedette 2×2
curée
media-bento--bento-feature
Bento média · matrice 2×2 carrée
curée
media-bento--matrix-2x2
Bento média · matrice 3×3 carrée
curée
media-bento--matrix-3x3
Bento média · grille uniforme 3 colonnes
curée
media-bento--grid-uniform-3
Bento média · grille uniforme · format 16/9
curée
media-bento--grid-uniform-video
Bento média · quadrillage · vignettes carrées
curée
media-bento--quad-square
Bento média · mosaïque · aérée
curée
media-bento--mosaic-ample
Bento média · en-tête centré (atomique)
curée
media-bento--atomic-header-center
media-bento · grille auto
générée
media-bento--grid-auto
media-bento · mosaïque
générée
media-bento--mosaic
media-bento · masonry
générée
media-bento--masonry
media-bento · matrice 4x4
générée
media-bento--matrix-4x4
media-bento · grille uniforme
générée
media-bento--grid-uniform
media-bento · vedette + split
générée
media-bento--featured-split
media-bento · défilement aperçu
générée
media-bento--peek-scroll
media-bento · masonry 3 colonnes
générée
media-bento--masonry-3
media-bento · paire pleine largeur
générée
media-bento--fullbleed-pair
media-bento · pellicule
générée
media-bento--filmstrip
media-bento · chevauchement
générée
media-bento--overlap

Comparer les déclinaisons · 24

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.

Bento média · papier · une vedette
curée
media-bento--paper-feature-2
background:paper
Ouvrir dans le builder
Bento média · papier · quadrillage
curée
media-bento--paper-quad
background:paperlayout:quad
Ouvrir dans le builder
Bento média · papier 2 · mosaïque
curée
media-bento--paper-2-mosaic
background:paper-2layout:mosaic
Ouvrir dans le builder
Bento média · encre · une vedette
curée
media-bento--ink-feature-2
background:ink
Ouvrir dans le builder
Bento média · encre · mosaïque
curée
media-bento--ink-mosaic
background:inklayout:mosaic
Ouvrir dans le builder
Bento média · tuile vedette 2×2
curée
media-bento--bento-feature
background:paperlayout:bento-feature
Ouvrir dans le builder
Bento média · matrice 2×2 carrée
curée
media-bento--matrix-2x2
background:paperlayout:matrix-2x2
Ouvrir dans le builder
Bento média · matrice 3×3 carrée
curée
media-bento--matrix-3x3
background:paperlayout:matrix-3x3
Ouvrir dans le builder
Bento média · grille uniforme 3 colonnes
curée
media-bento--grid-uniform-3
background:paperlayout:grid-uniformcolumns:3
Ouvrir dans le builder
Bento média · grille uniforme · format 16/9
curée
media-bento--grid-uniform-video
background:paper-2layout:grid-uniformcolumns:3itemHeight:video
Ouvrir dans le builder
Bento média · quadrillage · vignettes carrées
curée
media-bento--quad-square
background:paperlayout:quaditemHeight:square
Ouvrir dans le builder
Bento média · mosaïque · aérée
curée
media-bento--mosaic-ample
background:paperlayout:mosaicdensity:ample
Ouvrir dans le builder
Bento média · en-tête centré (atomique)
curée
media-bento--atomic-header-center
background:paperlayout:grid-uniformcolumns:3placement
Ouvrir dans le builder
media-bento · grille auto
générée
media-bento--grid-auto
layout:grid-auto
Ouvrir dans le builder
media-bento · mosaïque
générée
media-bento--mosaic
layout:mosaic
Ouvrir dans le builder
media-bento · masonry
générée
media-bento--masonry
layout:masonry
Ouvrir dans le builder
media-bento · matrice 4x4
générée
media-bento--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
media-bento · grille uniforme
générée
media-bento--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
media-bento · vedette + split
générée
media-bento--featured-split
layout:featured-split
Ouvrir dans le builder
media-bento · défilement aperçu
générée
media-bento--peek-scroll
layout:peek-scroll
Ouvrir dans le builder
media-bento · masonry 3 colonnes
générée
media-bento--masonry-3
layout:masonry-3
Ouvrir dans le builder
media-bento · paire pleine largeur
générée
media-bento--fullbleed-pair
layout:fullbleed-pair
Ouvrir dans le builder
media-bento · pellicule
générée
media-bento--filmstrip
layout:filmstrip
Ouvrir dans le builder
media-bento · chevauchement
générée
media-bento--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-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.

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

gallery-masonry stable

Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.

gallery Gallery Sections Zoom au survolApparition au scrollSurvol +3 16 décl.

media-block stable

Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.

gallery Gallery Sections Plusieurs imagesVidéo1 colonne 16 décl.

site-showcase stable

Vitrine du site livre : captures reelles dans des cadres navigateur, capture pleine page qui defile au survol, lien nofollow vers le site en production.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 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.

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.

related-cards-band stable

Bande de trois cards connexes pour relier cas, offres ou ressources en fin de page.

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

Code

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

{
  "type": "media-bento",
  "kicker_fr": "Projets · panorama",
  "kicker_en": "Projects · overview",
  "h2_fr": "Le travail, <i>en images</i>",
  "h2_en": "The work, <i>in pictures</i>",
  "lede_fr": "Un aperçu des systèmes conçus pour des PME exigeantes.",
  "lede_en": "A glimpse of systems built for demanding SMBs.",
  "layout": "feature-2",
  "tiles": [
    {
      "title_fr": "Plateau",
      "title_en": "Plateau",
      "tag_fr": "Acquisition",
      "tag_en": "Acquisition",
      "media_src": "/images/cas/cas-plateau.webp",
      "media_alt_fr": "Projet Plateau",
      "media_alt_en": "Plateau project",
      "span": "2",
      "link_href": "/cas-clients"
    },
    {
      "title_fr": "Halcyon",
      "title_en": "Halcyon",
      "tag_fr": "Productivité",
      "tag_en": "Productivity",
      "media_src": "/images/cas/cas-halcyon.webp",
      "media_alt_fr": "Projet Halcyon",
      "media_alt_en": "Halcyon project",
      "span": "1",
      "link_href": "/cas-clients"
    },
    {
      "title_fr": "Northbound",
      "title_en": "Northbound",
      "tag_fr": "Pilotage",
      "tag_en": "Steering",
      "media_src": "/images/cas/cas-northbound.webp",
      "media_alt_fr": "Projet Northbound",
      "media_alt_en": "Northbound project",
      "span": "1",
      "link_href": "/cas-clients"
    },
    {
      "title_fr": "Méridien",
      "title_en": "Meridian",
      "tag_fr": "Conversion",
      "tag_en": "Conversion",
      "media_src": "/images/themes/theme-acquisition.webp",
      "media_alt_fr": "Projet Méridien",
      "media_alt_en": "Meridian project",
      "span": "1",
      "link_href": "/cas-clients"
    },
    {
      "title_fr": "Boréal",
      "title_en": "Boreal",
      "tag_fr": "Automatisation",
      "tag_en": "Automation",
      "media_src": "/images/themes/theme-productivite.webp",
      "media_alt_fr": "Projet Boréal",
      "media_alt_en": "Boreal project",
      "span": "1",
      "link_href": "/cas-clients"
    },
    {
      "title_fr": "Sillage",
      "title_en": "Wake",
      "tag_fr": "Contenu",
      "tag_en": "Content",
      "media_src": "/images/themes/theme-contenu-seo.webp",
      "media_alt_fr": "Projet Sillage",
      "media_alt_en": "Wake project",
      "span": "1",
      "link_href": "/cas-clients"
    }
  ]
}

Pour un agent / MCP

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

/library/section/media-bento.json

Chemin du détail machine

/library/section/media-bento.json