Waimia.
Réserver un audit →

Feature Sections

media-swap-band

stable Bibliothèque Contenu inline (instance)

Présenter les capacités

Bande 2 ou 3 colonnes dont les images changent en fondu (auto ou au survol), avec CTA.

media swap band crossfade interactive
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

Présenter les capacités

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Effets

Fondu enchaîné Rotation automatique Apparition au scroll

Interactions

Survol Défilement Lecture automatique

Éléments

Plusieurs images Boutons

Mise en page

2 colonnes Scindé

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 ·
swap_mode Présentation enum Non · auto · hover
columns Présentation array Oui · 1..3
cta_label Contenu text Non fr / en ·
cta_href Contenu url Non · ·

Déclinaisons · 17

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

  • Bande média alternée · papier · rotation auto

    curée
    media-swap-band--paper-auto

  • Bande média alternée · papier · au survol

    curée
    media-swap-band--paper-hover

  • Bande média alternée · papier 2 · au survol

    curée
    media-swap-band--paper-2-hover

  • Bande média alternée · encre · rotation auto

    curée
    media-swap-band--ink-auto

  • Bande média alternée · encre · au survol

    curée
    media-swap-band--ink-hover

  • media-swap-band · grille auto

    générée
    media-swap-band--grid-auto

  • media-swap-band · mosaïque

    générée
    media-swap-band--mosaic

  • media-swap-band · masonry

    générée
    media-swap-band--masonry

  • media-swap-band · matrice 3x3

    générée
    media-swap-band--matrix-3x3

  • media-swap-band · matrice 4x4

    générée
    media-swap-band--matrix-4x4

  • media-swap-band · grille uniforme

    générée
    media-swap-band--grid-uniform

  • media-swap-band · vedette + split

    générée
    media-swap-band--featured-split

  • media-swap-band · défilement aperçu

    générée
    media-swap-band--peek-scroll

  • media-swap-band · masonry 3 colonnes

    générée
    media-swap-band--masonry-3

  • media-swap-band · paire pleine largeur

    générée
    media-swap-band--fullbleed-pair

  • media-swap-band · pellicule

    générée
    media-swap-band--filmstrip

  • media-swap-band · chevauchement

    générée
    media-swap-band--overlap

Comparer les déclinaisons · 17

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.

  • Bande média alternée · papier · rotation auto

    curée
    media-swap-band--paper-auto
    background:paper
    Ouvrir dans le builder

  • Bande média alternée · papier · au survol

    curée
    media-swap-band--paper-hover
    background:paperswap_mode:hover
    Ouvrir dans le builder

  • Bande média alternée · papier 2 · au survol

    curée
    media-swap-band--paper-2-hover
    background:paper-2swap_mode:hover
    Ouvrir dans le builder

  • Bande média alternée · encre · rotation auto

    curée
    media-swap-band--ink-auto
    background:ink
    Ouvrir dans le builder

  • Bande média alternée · encre · au survol

    curée
    media-swap-band--ink-hover
    background:inkswap_mode:hover
    Ouvrir dans le builder

  • media-swap-band · grille auto

    générée
    media-swap-band--grid-auto
    layout:grid-auto
    Ouvrir dans le builder

  • media-swap-band · mosaïque

    générée
    media-swap-band--mosaic
    layout:mosaic
    Ouvrir dans le builder

  • media-swap-band · masonry

    générée
    media-swap-band--masonry
    layout:masonry
    Ouvrir dans le builder

  • media-swap-band · matrice 3x3

    générée
    media-swap-band--matrix-3x3
    layout:matrix-3x3
    Ouvrir dans le builder

  • media-swap-band · matrice 4x4

    générée
    media-swap-band--matrix-4x4
    layout:matrix-4x4
    Ouvrir dans le builder

  • media-swap-band · grille uniforme

    générée
    media-swap-band--grid-uniform
    layout:grid-uniform
    Ouvrir dans le builder

  • media-swap-band · vedette + split

    générée
    media-swap-band--featured-split
    layout:featured-split
    Ouvrir dans le builder

  • media-swap-band · défilement aperçu

    générée
    media-swap-band--peek-scroll
    layout:peek-scroll
    Ouvrir dans le builder

  • media-swap-band · masonry 3 colonnes

    générée
    media-swap-band--masonry-3
    layout:masonry-3
    Ouvrir dans le builder

  • media-swap-band · paire pleine largeur

    générée
    media-swap-band--fullbleed-pair
    layout:fullbleed-pair
    Ouvrir dans le builder

  • media-swap-band · pellicule

    générée
    media-swap-band--filmstrip
    layout:filmstrip
    Ouvrir dans le builder

  • media-swap-band · chevauchement

    générée
    media-swap-band--overlap
    layout:overlap
    Ouvrir dans le builder

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.
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.
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.

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

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

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.
feature-tabs stable

Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.

tabs Feature Sections Défilement horizontalSurvolClic (bascule) +9 7 décl.
tech-capabilities-specs stable

Inventaire technique en table spec (capacité, description, statut) avec en-tête kicker et aside.

table Feature Sections Défilement horizontalApparition au scrollSurvol +6 9 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.
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.
tech-positioning-split stable

Prise de position technologique en split 50/50 : kicker, titre display, aside, statement manifesto et facts mono clé/valeur.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +2 15 décl.

Code

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

{
  "type": "media-swap-band",
  "kicker_fr": "Présence · ancrage",
  "kicker_en": "Presence · footprint",
  "h2_fr": "Au plus près de vos <i>équipes</i>",
  "h2_en": "Close to your <i>teams</i>",
  "lede_fr": "On travaille à distance comme sur site, avec la même exigence de proximité.",
  "lede_en": "We work remote or on site, with the same demand for closeness.",
  "swap_mode": "auto",
  "columns": [
    {
      "label_fr": "Sur site",
      "label_en": "On site",
      "sublabel_fr": "Ateliers et cadrage",
      "sublabel_en": "Workshops and scoping",
      "media": [
        {
          "media_src": "/images/editorial/menonhand.webp",
          "media_alt_fr": "Atelier",
          "media_alt_en": "Workshop"
        },
        {
          "media_src": "/images/editorial/gentlemanhandcraftergoworknow.webp",
          "media_alt_fr": "Cadrage",
          "media_alt_en": "Scoping"
        }
      ]
    },
    {
      "label_fr": "À distance",
      "label_en": "Remote",
      "sublabel_fr": "Build et itérations",
      "sublabel_en": "Build and iterations",
      "media": [
        {
          "media_src": "/images/editorial/womancomputer17.webp",
          "media_alt_fr": "Build",
          "media_alt_en": "Build"
        },
        {
          "media_src": "/images/themes/theme-productivite.webp",
          "media_alt_fr": "Itérations",
          "media_alt_en": "Iterations"
        }
      ]
    }
  ],
  "cta_label_fr": "Prendre rendez-vous",
  "cta_label_en": "Book a call",
  "cta_href": "https://cal.com/simonberos/audit"
}

Pour un agent / MCP

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

/library/section/media-swap-band.json

Chemin du détail machine

/library/section/media-swap-band.json