Feature Sections
horizontal-showcase
stable Bibliothèque Contenu inline (instance)Montrer les réalisations
Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.
Instances sur le site
Global 0 instance en page composable
Aperçu
Comment l'utiliser
| 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 | · |
panels | Contenu | array | Oui | · | 2..6 |
Déclinaisons · 16
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 12 générées.
-
Vitrine horizontale · papier
curéehorizontal-showcase--paper -
Vitrine horizontale · papier 2
curéehorizontal-showcase--paper-2 -
Vitrine horizontale · papier 3
curéehorizontal-showcase--paper-3 -
Vitrine horizontale · encre
curéehorizontal-showcase--ink -
horizontal-showcase · grille auto
généréehorizontal-showcase--grid-auto -
horizontal-showcase · mosaïque
généréehorizontal-showcase--mosaic -
horizontal-showcase · masonry
généréehorizontal-showcase--masonry -
horizontal-showcase · matrice 3x3
généréehorizontal-showcase--matrix-3x3 -
horizontal-showcase · matrice 4x4
généréehorizontal-showcase--matrix-4x4 -
horizontal-showcase · grille uniforme
généréehorizontal-showcase--grid-uniform -
horizontal-showcase · vedette + split
généréehorizontal-showcase--featured-split -
horizontal-showcase · défilement aperçu
généréehorizontal-showcase--peek-scroll -
horizontal-showcase · masonry 3 colonnes
généréehorizontal-showcase--masonry-3 -
horizontal-showcase · paire pleine largeur
généréehorizontal-showcase--fullbleed-pair -
horizontal-showcase · pellicule
généréehorizontal-showcase--filmstrip -
horizontal-showcase · chevauchement
généréehorizontal-showcase--overlap
Comparer les déclinaisons · 16
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.
-
Vitrine horizontale · papier
curéehorizontal-showcase--paperbackground:paperOuvrir dans le builder -
Vitrine horizontale · papier 2
curéehorizontal-showcase--paper-2background:paper-2Ouvrir dans le builder -
Vitrine horizontale · papier 3
curéehorizontal-showcase--paper-3background:paper-3Ouvrir dans le builder -
Vitrine horizontale · encre
curéehorizontal-showcase--inkbackground:inkOuvrir dans le builder -
horizontal-showcase · grille auto
généréehorizontal-showcase--grid-autolayout:grid-autoOuvrir dans le builder -
horizontal-showcase · mosaïque
généréehorizontal-showcase--mosaiclayout:mosaicOuvrir dans le builder -
horizontal-showcase · masonry
généréehorizontal-showcase--masonrylayout:masonryOuvrir dans le builder -
horizontal-showcase · matrice 3x3
généréehorizontal-showcase--matrix-3x3layout:matrix-3x3Ouvrir dans le builder -
horizontal-showcase · matrice 4x4
généréehorizontal-showcase--matrix-4x4layout:matrix-4x4Ouvrir dans le builder -
horizontal-showcase · grille uniforme
généréehorizontal-showcase--grid-uniformlayout:grid-uniformOuvrir dans le builder -
horizontal-showcase · vedette + split
généréehorizontal-showcase--featured-splitlayout:featured-splitOuvrir dans le builder -
horizontal-showcase · défilement aperçu
généréehorizontal-showcase--peek-scrolllayout:peek-scrollOuvrir dans le builder -
horizontal-showcase · masonry 3 colonnes
généréehorizontal-showcase--masonry-3layout:masonry-3Ouvrir dans le builder -
horizontal-showcase · paire pleine largeur
généréehorizontal-showcase--fullbleed-pairlayout:fullbleed-pairOuvrir dans le builder -
horizontal-showcase · pellicule
généréehorizontal-showcase--filmstriplayout:filmstripOuvrir dans le builder -
horizontal-showcase · chevauchement
généréehorizontal-showcase--overlaplayout:overlapOuvrir dans le builder
Sections liées
Même famille
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).
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).
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
Apparition au scrollDéfilementListe +1 17 décl.Similaires
media-block stable Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.
Plusieurs imagesVidéo1 colonne 16 décl.gallery-masonry stable Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.
Zoom au survolApparition au scrollSurvol +3 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.
Média collantApparition au scrollFondu enchaîné +7 12 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.
Apparition au scrollZoom au survolSurvol +4 16 décl.use-case-index stable Index éditorial de cas d'usage en lignes numérotées avec libellé italique, tag mono et lien d'ancrage solution.
Apparition au scrollSurvolDéfilement +2 17 décl.offer-rail stable Offres en onglets (familles) : diptyque ou trio de cartes relie a une rangee de services par une dorsale line-art dessinee au scroll. Une branche peut etre teintee (token --complementary). Vanilla JS aria, 0 dependance.
Apparition au scrollSurvolClic (bascule) +7 7 décl.Code
Données de la section (à placer dans sections[])
{
"type": "horizontal-showcase",
"kicker_fr": "Expertises · parcours",
"kicker_en": "Expertise · journey",
"h2_fr": "Quatre <i>terrains</i> de jeu",
"h2_en": "Four <i>playing fields</i>",
"lede_fr": "Faites défiler horizontalement. Chaque expertise est un levier que l'on câble sur mesure.",
"lede_en": "Scroll horizontally. Each expertise is a lever we wire to your context.",
"panels": [
{
"index_fr": "01",
"index_en": "01",
"tone": "paper-2",
"title_fr": "Site web intelligent",
"title_en": "Intelligent website",
"body_fr": "Un site qui capte, qualifie et convertit, instrumenté pour mesurer ce qui compte.",
"body_en": "A site that captures, qualifies and converts, instrumented to measure what matters.",
"points": [
{
"label_fr": "Acquisition mesurée",
"label_en": "Measured acquisition"
},
{
"label_fr": "Contenu qui se classe",
"label_en": "Content that ranks"
}
],
"media_src": "/images/themes/theme-acquisition.webp",
"media_alt_fr": "Acquisition",
"media_alt_en": "Acquisition",
"link_label_fr": "Voir",
"link_label_en": "View",
"link_href": "/services/site-web-ia"
},
{
"index_fr": "02",
"index_en": "02",
"tone": "ink",
"title_fr": "Intégration Claude",
"title_en": "Claude integration",
"body_fr": "Des workflows IA câblés dans vos outils, transférés à votre équipe.",
"body_en": "AI workflows wired into your tools, handed over to your team.",
"points": [
{
"label_fr": "Connecteurs MCP",
"label_en": "MCP connectors"
},
{
"label_fr": "Gouvernance claire",
"label_en": "Clear governance"
}
],
"media_src": "/images/themes/theme-productivite.webp",
"media_alt_fr": "Productivité",
"media_alt_en": "Productivity",
"link_label_fr": "Voir",
"link_label_en": "View",
"link_href": "/services/integration-claude"
},
{
"index_fr": "03",
"index_en": "03",
"tone": "paper-3",
"title_fr": "Contenu & SEO",
"title_en": "Content & SEO",
"body_fr": "Du contenu qui se classe sur Google et se fait citer par les IA génératives.",
"body_en": "Content that ranks on Google and gets cited by generative AI.",
"points": [
{
"label_fr": "SEO technique",
"label_en": "Technical SEO"
},
{
"label_fr": "GEO (IA génératives)",
"label_en": "GEO (generative AI)"
}
],
"media_src": "/images/themes/theme-contenu-seo.webp",
"media_alt_fr": "Contenu et SEO",
"media_alt_en": "Content and SEO",
"link_label_fr": "Voir",
"link_label_en": "View",
"link_href": "/services/seo-geo-contenu"
},
{
"index_fr": "04",
"index_en": "04",
"tone": "paper-2",
"title_fr": "Pilotage & finance",
"title_en": "Steering & finance",
"body_fr": "Voir clair dans les chiffres et décider sur des données fraîches.",
"body_en": "See clearly in the numbers and decide on fresh data.",
"points": [
{
"label_fr": "Tableaux de bord",
"label_en": "Dashboards"
},
{
"label_fr": "Données fraîches",
"label_en": "Fresh data"
}
],
"media_src": "/images/themes/theme-finance.webp",
"media_alt_fr": "Pilotage et finance",
"media_alt_en": "Steering and finance",
"link_label_fr": "Voir",
"link_label_en": "View",
"link_href": "/services/maintenance-growth"
}
]
}/library/section/horizontal-showcase.json
Chemin du détail machine
/library/section/horizontal-showcase.json