Waimia.
Réserver un audit →

Breadcrumb Sections

masthead-bar

stable Bibliothèque Contenu inline (instance)

Orienter / naviguer

Bande de chrome haut : fil d'Ariane intégré au masthead éditorial (méta lieu, édition, statut), posée sous le header fixe et au-dessus du hero. Composant autonome, universel (home incluse). Variante paper et ink.

masthead breadcrumb chrome editorial
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

Orienter / naviguer

Rôle de page

Utilitaire

Modèle de contenu

Contenu inline (instance)

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
layout Présentation text Non · ·
density Présentation enum Non · compact · base · ample
contentAlign Présentation enum Non · start · center · end
actionsAlign Présentation enum Non · start · center · end · spread
placement Présentation object Non · ·
columns Présentation enum Non · 1 · 2 · 3 · 4 · 5 · 6 · auto
colRatio Présentation enum Non · equal · 1-2 · 2-1 · 1-1-2 · 2-3 · golden
itemHeight Présentation enum Non · auto · even · square · video
proportion Présentation enum Non · 1-1 · 1-2 · 2-1 · 2-3 · 3-2
mediaSide Présentation enum Non · left · right
surface Présentation enum Non · flat · outlined · filled · elevated · ghost
divider Présentation enum Non · none · hairline · rule
radius Présentation enum Non · none · sm · md · lg
accentEdge Présentation enum Non · none · top · left
colsMobile Présentation enum Non · 1 · 2 · 3 · 4 · auto
colsTablet Présentation enum Non · 1 · 2 · 3 · 4 · auto
layoutMobile Présentation text Non · ·
titleScale Présentation enum Non · sm · base · lg · xl
eyebrow Présentation enum Non · none · kicker · badge
justifyContent Présentation enum Non · start · center · end · between · around · evenly
alignItems Présentation enum Non · start · center · end · stretch · baseline
justifyItems Présentation enum Non · start · center · end · stretch
alignContent Présentation enum Non · start · center · end · between · stretch
cellAlignX Présentation enum Non · start · center · end
cellAlignY Présentation enum Non · top · middle · bottom · between
cellPad Présentation enum Non · none · sm · base · lg
mediaFit Présentation enum Non · cover · contain
mediaRatio Présentation enum Non · auto · 1-1 · 4-3 · 3-2 · 16-9
reveal Présentation enum Non · none · fade · slide-up · slide-down · slide-left · slide-right · scale-in · blur-in · mask-up
hover Présentation enum Non · none · lift · zoom · glow · border · tint · underline · reveal-cta · media-zoom
pressFeedback Présentation enum Non · none · press
focusRing Présentation enum Non · auto · ring · inset · none
transitionSpeed Présentation enum Non · instant · fast · base · slow
transitionEase Présentation enum Non · standard · out · spring
selectedState Présentation enum Non · none · outline · fill · accent-edge
openState Présentation enum Non · auto
revealStagger Présentation bool Non · ·
revealDelay Présentation enum Non · none · sm · md
loop Présentation enum Non · none · marquee · pulse · float
scrollMotion Présentation enum Non · none · parallax · pin · progress
textMotion Présentation enum Non · none · word-stagger · count-up · type-on
motionSpeed Présentation enum Non · fast · base · slow
motionEase Présentation enum Non · standard · out · spring
pageTransition Présentation enum Non · none · fade · slide
cellBg Présentation enum Non · paper · paper-2 · paper-3 · ink · ink-2 · ink-3 · accent · none
cellTone Présentation enum Non · ink · muted · accent · accent-text · paper
tone Présentation enum Non · ink · muted · accent · accent-text · paper
borderTone Présentation enum Non · hairline · hairline-strong · accent · none
textFlow Présentation enum Non · horizontal · vertical-rl · vertical-lr · sideways
textTransform Présentation enum Non · none · uppercase · lowercase · capitalize
rotate Présentation enum Non · 90 · 180 · none · -90
objectPosition Présentation enum Non · center · top · bottom · left · right
overflow Présentation enum Non · visible · clip · auto
scrollSnap Présentation enum Non · none · proximity · mandatory
measure Présentation enum Non · prose · read · tight · wide · full
balance Présentation bool Non · ·
clamp Présentation enum Non · 1 · 2 · 3 · 4 · none
minHeight Présentation enum Non · auto · half · screen
width Présentation enum Non · full · contained · narrow · prose
headingLevel Présentation enum Non · h2 · h3
ariaLabel Présentation text Non · ·
headerAlign Présentation enum Non · left · center · right
headerKind Présentation enum Non · none · title · eyebrow-title · eyebrow-title-lede · eyebrow-title-lede-cta
introRow Présentation enum Non · none · lede-aside · desc-media-split · lede-centered
dividers Présentation enum Non · none · column-rules · row-rules · grid-lines
cardContent Présentation enum Non · title · title-desc · icon-title-desc · title-desc-meta · media-title-desc
cardMedia Présentation enum Non · none · icon · image · image-bg
cardAlign Présentation enum Non · left · center
colorDistribution Présentation enum Non · uniform · featured-first · one-accent · alternating
bgSource Présentation enum Non · color · image · gradient
bgImage Présentation text Non · ·
breadcrumb Contenu array Oui · 1..5
locations Contenu text Non fr / en ·
status Contenu text Non fr / en ·

Déclinaisons · 13

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.

  • masthead-bar · split

    générée
    masthead-bar--split

  • masthead-bar · centré

    générée
    masthead-bar--centered

  • masthead-bar · masthead

    générée
    masthead-bar--masthead

  • masthead-bar · entonnoir

    générée
    masthead-bar--funnel

  • masthead-bar · image pleine

    générée
    masthead-bar--full-bleed-image

  • masthead-bar · empilé

    générée
    masthead-bar--stacked

  • masthead-bar · minimal

    générée
    masthead-bar--minimal

  • masthead-bar · avec formulaire

    générée
    masthead-bar--with-form

  • masthead-bar · split inversé

    générée
    masthead-bar--split-reverse

  • masthead-bar · fond vidéo

    générée
    masthead-bar--video-bg

  • masthead-bar · centré étroit

    générée
    masthead-bar--centered-narrow

  • masthead-bar · avec bande de logos

    générée
    masthead-bar--with-logos-strip

Comparer les déclinaisons · 12

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

breadcrumb-bar stable

Fil d'Ariane « classic » : barre de navigation standard (ol mono uppercase, séparateurs /), posée sous le header fixe. Modèle sobre de la catégorie breadcrumb, à côté du modèle éditorial masthead-bar. 100% DS-driven.

breadcrumb Breadcrumb Sections 1 colonne 5 décl.

Même catégorie

breadcrumb-bar stable

Fil d'Ariane « classic » : barre de navigation standard (ol mono uppercase, séparateurs /), posée sous le header fixe. Modèle sobre de la catégorie breadcrumb, à côté du modèle éditorial masthead-bar. 100% DS-driven.

breadcrumb Breadcrumb Sections 1 colonne 5 décl.

Similaires

learning-path-list stable

Liste de parcours : titre de section et une ligne par parcours (titre en gras + description).

list Index Sections 1 colonne 17 décl.
used-service-callout stable

Encadre compact « offre(s) utilisee(s) » : liste de cross-liens vers les services mobilises sur un projet, bord gauche accent.

list Index Sections SurvolListe1 colonne 17 décl.
list-index-section stable

Masthead de listing avec filtres optionnels, conteneur de liste ouvert et footer custom.

list Index Sections Apparition au scrollDéfilement1 colonne 17 décl.
course-catalog-table stable

Tableau du catalogue formations : titre de section et lignes (#, titre, niveau en pill, durée, prix, flèche), une formation par ligne.

table Index Sections SurvolBadgeMulti-colonnes 12 décl.
welcome-section stable

Écran de confirmation post-conversion avec checkmark, message central, trois prochaines étapes et lien retour.

prose Utility Sections SurvolIllustration au traitBoutons +5 15 décl.
article-grid stable

Grille de cartes d’articles/blog : image optionnelle, tag, titre, date, temps de lecture, extrait, auteur et lien, en 2 ou 3 colonnes. Le classique éditorial B2B.

card-grid Content Listing Sections SurvolImageIcônes +3 18 décl.

Code

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

{
  "type": "masthead-bar",
  "breadcrumb": [
    {
      "label_fr": "Accueil",
      "label_en": "Home",
      "href": "/"
    },
    {
      "label_fr": "Solutions",
      "label_en": "Solutions",
      "href": "/services"
    },
    {
      "label_fr": "Intégrateur Claude Code",
      "label_en": "Claude Code integrator"
    }
  ],
  "locations_fr": "FR",
  "locations_en": "FR",
  "status_fr": "Disponible · T3 2026",
  "status_en": "Available · Q3 2026"
}

Pour un agent / MCP

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

/library/section/masthead-bar.json

Chemin du détail machine

/library/section/masthead-bar.json