CTA Sections

branded-callout

stable Bibliothèque Contenu inline (instance)

Pousser à l'action

Callout de marque fond paper-2 avec kicker §, titre display italique et corps de deux paragraphes, CTA optionnel.

Instances sur le site

Global 2 instances sur 2 pages

Page	Position	Contenu	Variante
/ressources/diagnostics/claude-pme	`section 6`	Un seul axe faible fait échouer le déploiement.	ink
/ressources/diagnostics/site-web-intelligent	`section 5`	Trois non, et c'est une vitrine.	ink

Aperçu

Comment l'utiliser

Intention

Pousser à l'action

Rôle de page

Conversion

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`kicker`	Contenu	`text`	Oui	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`body1`	Contenu	`text`	Oui	fr / en	·
`body2`	Contenu	`text`	Non	fr / en	·
`cta`	Contenu	`object`	Non	·	·
`bodyHtml`	Contenu	`bool`	Non	·	·
`variant`	Présentation	`enum`	Non	·	rail

Déclinaisons · 20

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

Encadré marque · fond papier 2
curée
branded-callout--paper-2
Encadré marque · fond papier 3
curée
branded-callout--paper-3
Encadré marque · fond encre
curée
branded-callout--ink
Encadré marque · filet accent à gauche
curée
branded-callout--rail
Encadré marque · filet accent · fond papier 3
curée
branded-callout--rail-paper-3
Encadré marque · filet accent · fond encre
curée
branded-callout--rail-ink
branded-callout · en ligne · aligné début
générée
branded-callout--inline-start
branded-callout · en ligne · centré
générée
branded-callout--inline-center
branded-callout · empilé · aligné début
générée
branded-callout--stacked-start
branded-callout · empilé · centré
générée
branded-callout--stacked-center
branded-callout · centré · aligné début
générée
branded-callout--centered-start
branded-callout · centré · centré
générée
branded-callout--centered-center
branded-callout · pleine largeur · aligné début
générée
branded-callout--full-bleed-start
branded-callout · pleine largeur · centré
générée
branded-callout--full-bleed-center
branded-callout · split image · aligné début
générée
branded-callout--split-image-start
branded-callout · split image · centré
générée
branded-callout--split-image-center
branded-callout · encadré · aligné début
générée
branded-callout--boxed-start
branded-callout · encadré · centré
générée
branded-callout--boxed-center

Comparer les déclinaisons · 18

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.

Encadré marque · fond papier 2
curée
branded-callout--paper-2
background:paper-2
Ouvrir dans le builder
Encadré marque · fond papier 3
curée
branded-callout--paper-3
background:paper-3
Ouvrir dans le builder
Encadré marque · fond encre
curée
branded-callout--ink
background:ink
Ouvrir dans le builder
Encadré marque · filet accent à gauche
curée
branded-callout--rail
variant:rail
Ouvrir dans le builder
Encadré marque · filet accent · fond papier 3
curée
branded-callout--rail-paper-3
variant:railbackground:paper-3
Ouvrir dans le builder
Encadré marque · filet accent · fond encre
curée
branded-callout--rail-ink
variant:railbackground:ink
Ouvrir dans le builder
branded-callout · en ligne · aligné début
générée
branded-callout--inline-start
layout:inlinealign:start
Ouvrir dans le builder
branded-callout · en ligne · centré
générée
branded-callout--inline-center
layout:inlinealign:center
Ouvrir dans le builder
branded-callout · empilé · aligné début
générée
branded-callout--stacked-start
layout:stackedalign:start
Ouvrir dans le builder
branded-callout · empilé · centré
générée
branded-callout--stacked-center
layout:stackedalign:center
Ouvrir dans le builder
branded-callout · centré · aligné début
générée
branded-callout--centered-start
layout:centeredalign:start
Ouvrir dans le builder
branded-callout · centré · centré
générée
branded-callout--centered-center
layout:centeredalign:center
Ouvrir dans le builder
branded-callout · pleine largeur · aligné début
générée
branded-callout--full-bleed-start
layout:full-bleedalign:start
Ouvrir dans le builder
branded-callout · pleine largeur · centré
générée
branded-callout--full-bleed-center
layout:full-bleedalign:center
Ouvrir dans le builder
branded-callout · split image · aligné début
générée
branded-callout--split-image-start
layout:split-imagealign:start
Ouvrir dans le builder
branded-callout · split image · centré
générée
branded-callout--split-image-center
layout:split-imagealign:center
Ouvrir dans le builder
branded-callout · encadré · aligné début
générée
branded-callout--boxed-start
layout:boxedalign:start
Ouvrir dans le builder
branded-callout · encadré · centré
générée
branded-callout--boxed-center
layout:boxedalign:center
Ouvrir dans le builder

Sections liées

Même famille

announcement-banner stable

Bandeau d’annonce/promo fin : badge optionnel, texte court et lien, bouton de fermeture optionnel (dismissible), variantes accent, encre ou paper-2.

band Banner Sections SurvolBoutonsIcônes +2 17 décl.

closing-cta-band stable

Bande CTA de cloture sur fond ink : kicker + titre display-lg (accent italique) + bouton primaire. Titre rendu en HTML (accent <em>).

band CTA Sections Apparition au scrollSurvolBoutons +1 17 décl.

comparison-pricing-callout stable

Bloc « pourquoi nous » en trois colonnes de propositions de valeur, terminé par un CTA et une mention. Sert de pont entre les features et la page tarifaire.

band Comparison Sections Illustration au traitListe3 colonnes 18 décl.

cta-band stable

Bandeau CTA horizontal pour relancer une action au milieu ou en fin de parcours.

band CTA Sections BoutonsPleine largeur 17 décl.

cta-final stable

CTA final pour conclure une page et orienter vers l'action de conversion principale.

band CTA Sections Apparition au scrollSurvolDéfilement +3 18 décl.

cta-inline stable

CTA inline discret pour insérer une action contextuelle dans un contenu existant.

band CTA Sections BoutonsPleine largeur 18 décl.

Même catégorie

closing-cta-band stable

Bande CTA de cloture sur fond ink : kicker + titre display-lg (accent italique) + bouton primaire. Titre rendu en HTML (accent <em>).

band CTA Sections Apparition au scrollSurvolBoutons +1 17 décl.

cta-band stable

Bandeau CTA horizontal pour relancer une action au milieu ou en fin de parcours.

band CTA Sections BoutonsPleine largeur 17 décl.

cta-final stable

CTA final pour conclure une page et orienter vers l'action de conversion principale.

band CTA Sections Apparition au scrollSurvolDéfilement +3 18 décl.

cta-form-inline stable

Bande CTA avec mini-formulaire inline (email et bouton), pour capter un lead ou une inscription newsletter à l'instant d'intention.

form-panel CTA Sections SurvolBoutonsFormulaire +3 13 décl.

cta-inline stable

CTA inline discret pour insérer une action contextuelle dans un contenu existant.

band CTA Sections BoutonsPleine largeur 18 décl.

cta-split-visual stable

Bandeau CTA asymetrique 2 colonnes : texte kicker/titre/body/boutons a gauche, visuel SVG decoratif a droite. Distinct des CTA centres.

split-media CTA Sections Apparition au scrollDéfilementIllustration au trait +4 17 décl.

Similaires

department-cta stable

Clôture CTA sur fond ink : Dingbat, titre display italique, body et deux boutons (rendez-vous + lien secondaire).

band CTA Sections Apparition au scrollSurvolDéfilement +3 14 décl.

newsletter-band stable

Bande newsletter fond sombre : titre éditorial large à gauche, formulaire capture email à droite.

band CTA Sections Apparition au scrollSurvolDéfilement +4 12 décl.

footer-cta-band stable

Bande CTA finale pleine largeur (titre, sous-titre, un à deux boutons), pensée comme le climax juste avant le footer. Sombre par défaut pour trancher avec la page.

band CTA Sections Boutons2 colonnesScindé 27 décl.

tunnel-step-nav stable

Pied de navigation d'étape tunnel : lien prev optionnel + cta (primary/accent/ghost) + barre méta (lecture + retour offre).

list CTA Sections Survol1 colonne 17 décl.

newsletter-signup-section stable

Section d'inscription newsletter pleine largeur (réutilise NewsletterSignup), fonds au choix dont ink pour un climax de page.

band Newsletter Sections BoutonsCentré 17 décl.

cta-newsletter-footer stable

Capture email compacte multi-colonne de type pré-footer : titre, champ, bouton et mention RGPD sur une ligne. Sombre par défaut pour clore la page sur l’abonnement.

band Newsletter Sections Illustration au traitBoutonsFormulaire +3 17 décl.

Code

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

{
  "type": "branded-callout",
  "kicker_fr": "§ Sous le capot",
  "kicker_en": "§ Under the hood",
  "h2_fr": "WaimiaOS · le <i>cadre</i> qu'on a construit pour ça.",
  "h2_en": "WaimiaOS · the <i>framework</i> we built for this.",
  "body1_fr": "Une couche d'orchestration maison qui connecte vos outils existants (CRM, ERP, tableurs) à des agents IA spécialisés. Pas de vendor lock-in, pas de promesse de refonte totale.",
  "body1_en": "An in-house orchestration layer that connects your existing tools (CRM, ERP, spreadsheets) to specialised AI agents. No vendor lock-in, no promise of a total rebuild.",
  "body2_fr": "Chaque module est livré avec sa documentation de maintenance. Votre équipe reprend la main quand elle le souhaite.",
  "body2_en": "Each module ships with its maintenance documentation. Your team takes over whenever they want.",
  "cta": {
    "label_fr": "Voir l'architecture →",
    "label_en": "View the architecture →",
    "href": "/agence/methode",
    "variant": "ghost"
  }
}

Pour un agent / MCP

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

/library/section/branded-callout.json

Chemin du détail machine

/library/section/branded-callout.json