Feature Sections

bento-grid

stable Bibliothèque Contenu inline (instance)

Présenter les capacités

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

Ouvrir dans le builder

Instances sur le site

Global 5 instances sur 5 pages

Page	Position	Contenu	Variante
/cas-usages/centraliser-donnees	`section 4`	Les briques qui relient vos outils	ink
/cas-usages/generer-plus-de-leads	`section 4`	Les briques qui captent vos leads	ink
/cas-usages/reduire-reporting	`section 4`	Les briques qui vous rendent vos jours	ink
/cas-usages/reduire-temps-cms	`section 4`	Les briques qui vous rendent le temps	ink
/cas-usages/standardiser-processus	`section 4`	Les briques qui ancrent vos standards	ink

Aperçu

Comment l'utiliser

Intention

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
`density`	Présentation	`enum`	Non	·	compact · base · ample
`columns`	Présentation	`enum`	Non	·	2 · 3 · 4 · auto
`layout`	Présentation	`enum`	Non	·	bento · bento-feature · mosaic · matrix-2x2 · matrix-3x3 · grid-uniform
`itemHeight`	Présentation	`enum`	Non	·	auto · even · square · video
`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	·
`cells`	Contenu	`array`	Oui	·	3..8

Déclinaisons · 26

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

Bento · papier
curée
bento-grid--paper
Bento · papier 2
curée
bento-grid--paper-2
Bento · papier 3
curée
bento-grid--paper-3
Bento · encre
curée
bento-grid--ink
Bento · grille fluide adaptative
curée
bento-grid--auto-fluide
Bento · 3 colonnes · dense
curée
bento-grid--3col-compact
Bento · 4 colonnes · aéré
curée
bento-grid--4col-ample
Bento · 2 colonnes · encre
curée
bento-grid--2col-ink
Bento · encre · aéré
curée
bento-grid--ink-ample
Bento · papier · dense
curée
bento-grid--paper-compact
Bento · tuile vedette 2×2
curée
bento-grid--bento-feature
Bento · mosaïque éditoriale
curée
bento-grid--mosaic
Bento · matrice 2×2 carrée
curée
bento-grid--matrix-2x2
Bento · matrice 3×3 carrée
curée
bento-grid--matrix-3x3
Bento · grille uniforme 3 colonnes
curée
bento-grid--grid-uniform-3
Bento · grille uniforme · cellules carrées
curée
bento-grid--grid-uniform-square
Bento · mosaïque · encre
curée
bento-grid--mosaic-ink
Bento · en-tête centré (atomique)
curée
bento-grid--atomic-header-center
Bento · mosaïque avant l'en-tête (atomique)
curée
bento-grid--atomic-body-first
bento-grid · bento
générée
bento-grid--bento
bento-grid · matrice 4x4
générée
bento-grid--matrix-4x4
bento-grid · grille uniforme
générée
bento-grid--grid-uniform
bento-grid · coin vedette
générée
bento-grid--feature-corner
bento-grid · matrice 3x2
générée
bento-grid--matrix-3x2
bento-grid · ligne vedette
générée
bento-grid--feature-row
bento-grid · quadrant
générée
bento-grid--quad

Comparer les déclinaisons · 26

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 · papier
curée
bento-grid--paper
background:paper
Ouvrir dans le builder
Bento · papier 2
curée
bento-grid--paper-2
background:paper-2
Ouvrir dans le builder
Bento · papier 3
curée
bento-grid--paper-3
background:paper-3
Ouvrir dans le builder
Bento · encre
curée
bento-grid--ink
background:ink
Ouvrir dans le builder
Bento · grille fluide adaptative
curée
bento-grid--auto-fluide
background:papercolumns:auto
Ouvrir dans le builder
Bento · 3 colonnes · dense
curée
bento-grid--3col-compact
background:paper-2columns:3density:compact
Ouvrir dans le builder
Bento · 4 colonnes · aéré
curée
bento-grid--4col-ample
background:papercolumns:4density:ample
Ouvrir dans le builder
Bento · 2 colonnes · encre
curée
bento-grid--2col-ink
background:inkcolumns:2
Ouvrir dans le builder
Bento · encre · aéré
curée
bento-grid--ink-ample
background:inkdensity:ample
Ouvrir dans le builder
Bento · papier · dense
curée
bento-grid--paper-compact
background:paperdensity:compact
Ouvrir dans le builder
Bento · tuile vedette 2×2
curée
bento-grid--bento-feature
background:paperlayout:bento-feature
Ouvrir dans le builder
Bento · mosaïque éditoriale
curée
bento-grid--mosaic
background:paper-2layout:mosaic
Ouvrir dans le builder
Bento · matrice 2×2 carrée
curée
bento-grid--matrix-2x2
background:paperlayout:matrix-2x2
Ouvrir dans le builder
Bento · matrice 3×3 carrée
curée
bento-grid--matrix-3x3
background:paperlayout:matrix-3x3
Ouvrir dans le builder
Bento · grille uniforme 3 colonnes
curée
bento-grid--grid-uniform-3
background:paperlayout:grid-uniformcolumns:3
Ouvrir dans le builder
Bento · grille uniforme · cellules carrées
curée
bento-grid--grid-uniform-square
background:paper-3layout:grid-uniformcolumns:3itemHeight:square
Ouvrir dans le builder
Bento · mosaïque · encre
curée
bento-grid--mosaic-ink
background:inklayout:mosaic
Ouvrir dans le builder
Bento · en-tête centré (atomique)
curée
bento-grid--atomic-header-center
background:paperlayout:grid-uniformcolumns:3placement
Ouvrir dans le builder
Bento · mosaïque avant l'en-tête (atomique)
curée
bento-grid--atomic-body-first
background:paperlayout:mosaicplacement
Ouvrir dans le builder
bento-grid · bento
générée
bento-grid--bento
layout:bento
Ouvrir dans le builder
bento-grid · matrice 4x4
générée
bento-grid--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
bento-grid · grille uniforme
générée
bento-grid--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
bento-grid · coin vedette
générée
bento-grid--feature-corner
layout:feature-corner
Ouvrir dans le builder
bento-grid · matrice 3x2
générée
bento-grid--matrix-3x2
layout:matrix-3x2
Ouvrir dans le builder
bento-grid · ligne vedette
générée
bento-grid--feature-row
layout:feature-row
Ouvrir dans le builder
bento-grid · quadrant
générée
bento-grid--quad
layout:quad
Ouvrir dans le builder

Sections liées

Même famille

stats-bento stable

Quatre KPI en grille bento de tailles inegales : une grande cellule avec chiffre geant et trois cellules secondaires, plus un bandeau bas pleine largeur.

bento Stats Sections Apparition au scrollDéfilementChiffres clés +2 27 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.

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.

deliverables-grid stable

Grille de livrables tangibles avec cards numérotées et tag format/durée, extraite des pages offre et détail.

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

Similaires

feature-comparison-grid stable

Différenciation légère « nous vs eux » en grille de cartes : 2 ou 3 colonnes, lignes cochées ou barrées, colonne mise en avant. Plus léger que la table comparative.

card-grid Feature Sections ListeCartes3 colonnes 18 décl.

persona-attributes-grid stable

Grille persona 2×2 pain points / critères / objections / preuves avec footer méta sombre en trois colonnes.

card-grid Feature Sections Liste3 colonnes 18 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.

inclusions-list stable

Liste d'inclusions inline séparée par point médian pour expliciter le périmètre d'un engagement.

list Feature Sections Liste1 colonne 17 décl.

editorial-preview stable

Index éditorial de publications en lignes numérotées (num · date · tag · titre italique · flèche), extrait de FieldNotes.

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

feature-grid stable

Grille de fonctionnalités pour structurer les bénéfices ou capacités principales d'une offre.

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

Code

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

{
  "type": "bento-grid",
  "kicker_fr": "Architecture · bento",
  "kicker_en": "Architecture · bento",
  "h2_fr": "Cinq <i>atouts</i> en une mosaique",
  "h2_en": "Five <i>strengths</i> in one mosaic",
  "cells": [
    {
      "glyph": "◈",
      "title_fr": "Orchestration multi-agents",
      "title_en": "Multi-agent orchestration",
      "body_fr": "Décomposez chaque mission en sous-tâches hiérarchiques routées vers le modèle optimal. Une demande, une chaîne hétérogène de workers.",
      "body_en": "Break each mission into hierarchical subtasks routed to the optimal model. One request, one heterogeneous chain of workers."
    },
    {
      "glyph": "▸",
      "title_fr": "Tokens canoniques",
      "title_en": "Canonical tokens",
      "body_fr": "118 variables CSS exposées. Pioche, n'invente pas.",
      "body_en": "118 CSS variables exposed. Pick, never invent."
    },
    {
      "glyph": "◎",
      "title_fr": "Composants atomiques",
      "title_en": "Atomic components",
      "body_fr": "Catalogue complet en 7 couches Tier 1 composables.",
      "body_en": "Full catalogue across 7 composable Tier 1 layers."
    },
    {
      "glyph": "⊡",
      "title_fr": "DS fige post-V1",
      "title_en": "DS frozen post-V1",
      "body_fr": "Composition uniquement : 0 nouveau token, 0 markup orphelin.",
      "body_en": "Composition only: 0 new token, 0 orphan markup."
    },
    {
      "glyph": "⟳",
      "title_fr": "Deploy continu sur Vercel",
      "title_en": "Continuous deploy on Vercel",
      "body_fr": "Preview par branche, GF-1 sur prod avant tout merge sur main.",
      "body_en": "Branch previews, GF-1 on prod before any merge to main.",
      "span": "wide"
    },
    {
      "glyph": "⊞",
      "title_fr": "Facettes IA-opérables",
      "title_en": "AI-operable facets",
      "body_fr": "Effets, interactions, éléments, layout : chaque section déclare ses axes.",
      "body_en": "Effects, interactions, elements, layout: each section declares its axes."
    }
  ]
}

Pour un agent / MCP

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

/library/section/bento-grid.json

Chemin du détail machine

/library/section/bento-grid.json