Waimia.
Réserver un audit →

Gallery Sections

media-block

stable Bibliothèque Contenu inline (instance)

Montrer les réalisations

Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.

media image video embed
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

Montrer les réalisations

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Éléments

Plusieurs images Vidéo

Mise en page

1 colonne

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3 · ink
display Contenu enum Non · full · inset
caption Contenu text Non fr / en ·
media_kind Contenu enum Oui · image · svg · video · embed
src Contenu image Oui · ·
alt Contenu text Non fr / en ·
width Présentation number Non · ·
height Contenu number Non · ·

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.

  • Bloc média · pleine largeur · papier

    curée
    media-block--full-paper

  • Bloc média · encart centré · papier 2

    curée
    media-block--inset-paper-2

  • Bloc média · encart centré · papier 3

    curée
    media-block--inset-paper-3

  • Bloc média · pleine largeur · encre

    curée
    media-block--full-ink

  • media-block · grille auto

    générée
    media-block--grid-auto

  • media-block · mosaïque

    générée
    media-block--mosaic

  • media-block · masonry

    générée
    media-block--masonry

  • media-block · matrice 3x3

    générée
    media-block--matrix-3x3

  • media-block · matrice 4x4

    générée
    media-block--matrix-4x4

  • media-block · grille uniforme

    générée
    media-block--grid-uniform

  • media-block · vedette + split

    générée
    media-block--featured-split

  • media-block · défilement aperçu

    générée
    media-block--peek-scroll

  • media-block · masonry 3 colonnes

    générée
    media-block--masonry-3

  • media-block · paire pleine largeur

    générée
    media-block--fullbleed-pair

  • media-block · pellicule

    générée
    media-block--filmstrip

  • media-block · chevauchement

    générée
    media-block--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

gallery-masonry stable

Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.

gallery Gallery Sections Zoom au survolApparition au scrollSurvol +3 16 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.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 décl.

Même catégorie

gallery-masonry stable

Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.

gallery Gallery Sections Zoom au survolApparition au scrollSurvol +3 16 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.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 décl.

Similaires

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.
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.
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.
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.
agentic-terminal stable

Mockup IDE agentique : fenêtre macOS, explorateur de fichiers, prompt utilisateur et bloc de code qui s'écrit en direct caractère par caractère, puis message de succès, footer stats et badges. Fond encre, accent terracotta.

terminal-shell Terminal Sections Bloc de codeBadge1 colonne 14 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.

Code

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

{
  "type": "media-block",
  "caption_fr": "Illustration éditoriale · variante inset (média centré sur --wrap-prose)",
  "caption_en": "Editorial illustration · inset variant (media centered on --wrap-prose)",
  "media_kind": "image",
  "display": "inset",
  "src": "/images/themes/theme-productivite.webp",
  "alt_fr": "Illustration éditoriale : cadran d'horloge épuré à l'encre dont un secteur libéré est rempli de terracotta.",
  "alt_en": "Editorial illustration: clean ink clock face with one freed sector filled in terracotta.",
  "width": 1024,
  "height": 1024
}

Pour un agent / MCP

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

/library/section/media-block.json

Chemin du détail machine

/library/section/media-block.json