Index Sections

list-index-section

stable Bibliothèque Contenu inline (instance)

Orienter / naviguer

Masthead de listing avec filtres optionnels, conteneur de liste ouvert et footer custom.

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

Orienter / naviguer

Rôle de page

Utilitaire

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`	Oui	fr / en	·
`h1`	Contenu	`text`	Oui	fr / en	·
`lede`	Contenu	`text`	Oui	fr / en	·
`filters_html`	Contenu	`richtext`	Non	fr / en	·
`list_html`	Contenu	`richtext`	Non	fr / en	·
`footer_html`	Contenu	`richtext`	Non	fr / en	·

Déclinaisons · 17

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 3 curées, 14 générées. Échantillon des 12 premières générées (sur 14) ; toutes accessibles en rendu isolé.

Index liste · masthead papier 2
curée
list-index-section--paper-2
Index liste · masthead papier 3
curée
list-index-section--paper-3
Index liste · masthead encre
curée
list-index-section--ink
list-index-section · grille uniforme
générée
list-index-section--grid-uniform
list-index-section · grille auto
générée
list-index-section--grid-auto
list-index-section · grille asymétrique
générée
list-index-section--grid-asym
list-index-section · liste
générée
list-index-section--list
list-index-section · lignes séparées
générée
list-index-section--rows-divided
list-index-section · bento vedette
générée
list-index-section--bento-feature
list-index-section · vedette + split
générée
list-index-section--featured-split
list-index-section · deux colonnes
générée
list-index-section--two-col
list-index-section · alternance
générée
list-index-section--alternating
list-index-section · jeu de cartes
générée
list-index-section--cards-deck
list-index-section · liste média à gauche
générée
list-index-section--list-media-left
list-index-section · grille 3 + vedette
générée
list-index-section--grid-3-featured

Comparer les déclinaisons · 15

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.

Index liste · masthead papier 2
curée
list-index-section--paper-2
background:paper-2
Ouvrir dans le builder
Index liste · masthead papier 3
curée
list-index-section--paper-3
background:paper-3
Ouvrir dans le builder
Index liste · masthead encre
curée
list-index-section--ink
background:ink
Ouvrir dans le builder
list-index-section · grille uniforme
générée
list-index-section--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
list-index-section · grille auto
générée
list-index-section--grid-auto
layout:grid-auto
Ouvrir dans le builder
list-index-section · grille asymétrique
générée
list-index-section--grid-asym
layout:grid-asym
Ouvrir dans le builder
list-index-section · liste
générée
list-index-section--list
layout:list
Ouvrir dans le builder
list-index-section · lignes séparées
générée
list-index-section--rows-divided
layout:rows-divided
Ouvrir dans le builder
list-index-section · bento vedette
générée
list-index-section--bento-feature
layout:bento-feature
Ouvrir dans le builder
list-index-section · vedette + split
générée
list-index-section--featured-split
layout:featured-split
Ouvrir dans le builder
list-index-section · deux colonnes
générée
list-index-section--two-col
layout:two-col
Ouvrir dans le builder
list-index-section · alternance
générée
list-index-section--alternating
layout:alternating
Ouvrir dans le builder
list-index-section · jeu de cartes
générée
list-index-section--cards-deck
layout:cards-deck
Ouvrir dans le builder
list-index-section · liste média à gauche
générée
list-index-section--list-media-left
layout:list-media-left
Ouvrir dans le builder
list-index-section · grille 3 + vedette
générée
list-index-section--grid-3-featured
layout:grid-3-featured
Ouvrir dans le builder

Sections liées

Même famille

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.

curriculum-timeline stable

Bloc curriculum : entete + frise verticale (experience / formation / distinctions) sur fond paper-2. Compose l’atome Timeline.

list Timelines Apparition au scrollFrise chronologique1 colonne 15 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.

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.

learning-path-list stable

Liste de parcours : titre de section et une ligne par parcours (titre en gras + description).

list Index Sections 1 colonne 17 décl.

numbered-layer-list stable

Liste de couches numerotees : rang serif accent + titre + intro + sous-puces « → ». Ideale pour presenter une stack, des livrables ou des rangs par couche.

list Editorial Sections Apparition au scrollDéfilementListe +2 18 décl.

Même catégorie

course-catalog-table stable

Tableau du catalogue formations : titre de section et lignes (#, titre, niveau en pill, durée, prix, flèche), une formation par ligne.

table Index Sections SurvolBadgeMulti-colonnes 12 décl.

learning-path-list stable

Liste de parcours : titre de section et une ligne par parcours (titre en gras + description).

list Index Sections 1 colonne 17 décl.

related-links stable

Bloc compact de maillage interne : groupes de liens internes contextuels en colonnes, avec petit label de groupe et description optionnelle. Renforce le SEO et oriente la navigation en fin de page.

list Index Sections Apparition au scrollSurvolListe +1 17 décl.

used-service-callout stable

Encadre compact « offre(s) utilisee(s) » : liste de cross-liens vers les services mobilises sur un projet, bord gauche accent.

list Index Sections SurvolListe1 colonne 17 décl.

Similaires

breadcrumb-bar stable

Fil d'Ariane « classic » : barre de navigation standard (ol mono uppercase, séparateurs /), posée sous le header fixe. Modèle sobre de la catégorie breadcrumb, à côté du modèle éditorial masthead-bar. 100% DS-driven.

breadcrumb Breadcrumb Sections 1 colonne 5 décl.

masthead-bar stable

Bande de chrome haut : fil d'Ariane intégré au masthead éditorial (méta lieu, édition, statut), posée sous le header fixe et au-dessus du hero. Composant autonome, universel (home incluse). Variante paper et ink.

breadcrumb Breadcrumb Sections 1 colonne 13 décl.

welcome-section stable

Écran de confirmation post-conversion avec checkmark, message central, trois prochaines étapes et lien retour.

prose Utility Sections SurvolIllustration au traitBoutons +5 15 décl.

sector-card-grid stable

Grille de hubs sectoriels en cartes cliquables : ICP en kicker, secteur, douleur en une phrase et CTA, en 3 colonnes sur fond hairline.

card-grid Content Listing Sections Apparition au scrollSurvolBoutons +2 17 décl.

publications-panel stable

Panneau publications d’un profil : entete + callout manifeste + liste de publications + index de ressources recentes + lien « tout voir ».

list Content Listing Sections Apparition au scrollSurvolListe +2 17 décl.

article-grid stable

Grille de cartes d’articles/blog : image optionnelle, tag, titre, date, temps de lecture, extrait, auteur et lien, en 2 ou 3 colonnes. Le classique éditorial B2B.

card-grid Content Listing Sections SurvolImageIcônes +3 18 décl.

Code

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

{
  "type": "list-index-section",
  "kicker_fr": "§ Ressources · Cas clients",
  "kicker_en": "§ Resources · Case studies",
  "h1_fr": "Des cas <i>mesurés</i>, pas des promesses.",
  "h1_en": "<i>Measured</i> cases, not promises.",
  "lede_fr": "Un index pour comparer les chantiers livrés, les stacks branchées et les impacts réellement observés.",
  "lede_en": "An index to compare shipped engagements, wired stacks, and observed impact.",
  "filters_html_fr": "<a href=\"#all\">Tous</a><a href=\"#sales\">Sales</a><a href=\"#ops\">Ops</a>",
  "filters_html_en": "<a href=\"#all\">All</a><a href=\"#sales\">Sales</a><a href=\"#ops\">Ops</a>",
  "list_html_fr": "<div class=\"demo-list-row\"><span>01</span><strong>Scale-up SaaS B2B</strong><em>pipeline réactivé</em></div><div class=\"demo-list-row\"><span>02</span><strong>Healthtech</strong><em>temps de triage réduit</em></div>",
  "list_html_en": "<div class=\"demo-list-row\"><span>01</span><strong>B2B SaaS scale-up</strong><em>pipeline reactivated</em></div><div class=\"demo-list-row\"><span>02</span><strong>Healthtech</strong><em>triage time reduced</em></div>"
}

Pour un agent / MCP

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

/library/section/list-index-section.json

Chemin du détail machine

/library/section/list-index-section.json