Feature Sections
stack-cards
stable Bibliothèque Contenu inline (instance)Expliquer une méthode, Présenter les capacités
Cartes numerotees qui se superposent en s'empilant au scroll (effet stack sticky, CSS pur). Ideal pour une methode en plusieurs temps.
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 | · |
cards | 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.
-
Cartes empilées · papier
curéestack-cards--paper -
Cartes empilées · papier 2
curéestack-cards--paper-2 -
Cartes empilées · papier 3
curéestack-cards--paper-3 -
Cartes empilées · encre
curéestack-cards--ink -
stack-cards · grille auto
généréestack-cards--grid-auto -
stack-cards · mosaïque
généréestack-cards--mosaic -
stack-cards · masonry
généréestack-cards--masonry -
stack-cards · matrice 3x3
généréestack-cards--matrix-3x3 -
stack-cards · matrice 4x4
généréestack-cards--matrix-4x4 -
stack-cards · grille uniforme
généréestack-cards--grid-uniform -
stack-cards · vedette + split
généréestack-cards--featured-split -
stack-cards · défilement aperçu
généréestack-cards--peek-scroll -
stack-cards · masonry 3 colonnes
généréestack-cards--masonry-3 -
stack-cards · paire pleine largeur
généréestack-cards--fullbleed-pair -
stack-cards · pellicule
généréestack-cards--filmstrip -
stack-cards · chevauchement
généréestack-cards--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.
-
Cartes empilées · papier
curéestack-cards--paperbackground:paperOuvrir dans le builder -
Cartes empilées · papier 2
curéestack-cards--paper-2background:paper-2Ouvrir dans le builder -
Cartes empilées · papier 3
curéestack-cards--paper-3background:paper-3Ouvrir dans le builder -
Cartes empilées · encre
curéestack-cards--inkbackground:inkOuvrir dans le builder -
stack-cards · grille auto
généréestack-cards--grid-autolayout:grid-autoOuvrir dans le builder -
stack-cards · mosaïque
généréestack-cards--mosaiclayout:mosaicOuvrir dans le builder -
stack-cards · masonry
généréestack-cards--masonrylayout:masonryOuvrir dans le builder -
stack-cards · matrice 3x3
généréestack-cards--matrix-3x3layout:matrix-3x3Ouvrir dans le builder -
stack-cards · matrice 4x4
généréestack-cards--matrix-4x4layout:matrix-4x4Ouvrir dans le builder -
stack-cards · grille uniforme
généréestack-cards--grid-uniformlayout:grid-uniformOuvrir dans le builder -
stack-cards · vedette + split
généréestack-cards--featured-splitlayout:featured-splitOuvrir dans le builder -
stack-cards · défilement aperçu
généréestack-cards--peek-scrolllayout:peek-scrollOuvrir dans le builder -
stack-cards · masonry 3 colonnes
généréestack-cards--masonry-3layout:masonry-3Ouvrir dans le builder -
stack-cards · paire pleine largeur
généréestack-cards--fullbleed-pairlayout:fullbleed-pairOuvrir dans le builder -
stack-cards · pellicule
généréestack-cards--filmstriplayout:filmstripOuvrir dans le builder -
stack-cards · chevauchement
généréestack-cards--overlaplayout:overlapOuvrir dans le builder
Sections liées
Même famille
horizontal-showcase stable Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.
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).
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.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
feature-zigzag stable Lignes alternées visuel/texte (gauche-droite, droite-gauche) pour presenter les fonctionnalites cles d'une offre avec un rythme editorial fort.
Apparition au scrollDéfilementIllustration au trait +6 25 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.editorial-split-grid stable Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.
Apparition au scrollSurvolDéfilement +4 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.
Apparition au scrollSurvolDéfilement +4 29 décl.why-stalls stable Section éditoriale "pourquoi X cale" : chapter label sticky à gauche + N FIG rows à droite avec row-lines.
DéfilementIllustration au trait2 colonnes +2 14 décl.guarantee-block stable Bloc garantie pour expliciter les engagements, réduire le risque perçu et rassurer.
Liste2 colonnesMédia à droite +1 17 décl.Code
Données de la section (à placer dans sections[])
{
"type": "stack-cards",
"kicker_fr": "Méthode · 4 temps",
"kicker_en": "Method · 4 steps",
"h2_fr": "De la stratégie à la <i>croissance</i>",
"h2_en": "From strategy to <i>growth</i>",
"lede_fr": "Une méthode en quatre temps, chacun adossé à un livrable concret. Pas de boîte noire.",
"lede_en": "A four step method, each backed by a concrete deliverable. No black box.",
"cards": [
{
"index_fr": "01",
"index_en": "01",
"tone": "paper",
"title_fr": "Stratégie",
"title_en": "Strategy",
"body_fr": "On cartographie vos flux, vos outils et vos angles morts pour cibler les gains les plus rapides.",
"body_en": "We map your flows, tools and blind spots to target the fastest wins.",
"points": [
{
"label_fr": "Cartographie des flux",
"label_en": "Flow mapping"
},
{
"label_fr": "Plan d'action priorisé",
"label_en": "Prioritised action plan"
}
],
"media_src": "/images/illustrations/ds/chess-paper.webp",
"media_alt_fr": "Illustration : stratégie",
"media_alt_en": "Illustration: strategy"
},
{
"index_fr": "02",
"index_en": "02",
"tone": "ink",
"title_fr": "Conception",
"title_en": "Design",
"body_fr": "On conçoit l'architecture, les workflows et l'expérience, alignés sur vos objectifs business.",
"body_en": "We design the architecture, workflows and experience, aligned with your business goals.",
"points": [
{
"label_fr": "Architecture et workflows",
"label_en": "Architecture and workflows"
},
{
"label_fr": "Maquettes validées",
"label_en": "Validated mockups"
}
],
"media_src": "/images/illustrations/ds/style-12-ink.webp",
"media_alt_fr": "Illustration : conception",
"media_alt_en": "Illustration: design"
},
{
"index_fr": "03",
"index_en": "03",
"tone": "paper",
"title_fr": "Déploiement",
"title_en": "Deployment",
"body_fr": "On déploie, on documente et on transfère. Tout reste lisible, modifiable et extensible par votre équipe.",
"body_en": "We deploy, document and hand over. Everything stays readable, editable and extensible by your team.",
"points": [
{
"label_fr": "Mise en production",
"label_en": "Go live"
},
{
"label_fr": "Documentation transférée",
"label_en": "Documentation handed over"
}
],
"media_src": "/images/illustrations/ds/men-on-hand-paper.webp",
"media_alt_fr": "Illustration : déploiement",
"media_alt_en": "Illustration: deployment"
},
{
"index_fr": "04",
"index_en": "04",
"tone": "ink",
"title_fr": "Croissance",
"title_en": "Growth",
"body_fr": "On mesure, on itère et on fait monter votre équipe en autonomie à chaque cycle.",
"body_en": "We measure, iterate and grow your team autonomy with every cycle.",
"points": [
{
"label_fr": "Mesure et itération",
"label_en": "Measure and iterate"
},
{
"label_fr": "Montée en autonomie",
"label_en": "Growing autonomy"
}
],
"media_src": "/images/illustrations/ds/money-money-ink.webp",
"media_alt_fr": "Illustration : croissance",
"media_alt_en": "Illustration: growth"
}
]
}/library/section/stack-cards.json
Chemin du détail machine
/library/section/stack-cards.json