Waimia.

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

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Contrat de slots

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ée
    stack-cards--paper
  • Cartes empilées · papier 2

    curée
    stack-cards--paper-2
  • Cartes empilées · papier 3

    curée
    stack-cards--paper-3
  • Cartes empilées · encre

    curée
    stack-cards--ink
  • stack-cards · grille auto

    générée
    stack-cards--grid-auto
  • stack-cards · mosaïque

    générée
    stack-cards--mosaic
  • stack-cards · masonry

    générée
    stack-cards--masonry
  • stack-cards · matrice 3x3

    générée
    stack-cards--matrix-3x3
  • stack-cards · matrice 4x4

    générée
    stack-cards--matrix-4x4
  • stack-cards · grille uniforme

    générée
    stack-cards--grid-uniform
  • stack-cards · vedette + split

    générée
    stack-cards--featured-split
  • stack-cards · défilement aperçu

    générée
    stack-cards--peek-scroll
  • stack-cards · masonry 3 colonnes

    générée
    stack-cards--masonry-3
  • stack-cards · paire pleine largeur

    générée
    stack-cards--fullbleed-pair
  • stack-cards · pellicule

    générée
    stack-cards--filmstrip
  • stack-cards · chevauchement

    générée
    stack-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.

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-bento stable

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

scroll-interactive Feature Sections 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.

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.

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

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.

split-media Feature Sections 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.

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.
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.
why-stalls stable

Section éditoriale "pourquoi X cale" : chapter label sticky à gauche + N FIG rows à droite avec row-lines.

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

band Feature Sections 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"
    }
  ]
}

Pour un agent / MCP

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

/library/section/stack-cards.json

Chemin du détail machine

/library/section/stack-cards.json