Pricing Sections

pricing-toggle

stable Bibliothèque Contenu inline (instance)

Présenter les tarifs

Grille de cartes de prix avec bascule mensuel/annuel (CSS-only, sans JS) qui change les prix affichés et signale l'économie annuelle.

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 tarifs

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`	Non	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`label_monthly`	Contenu	`text`	Oui	fr / en	·
`label_annual`	Contenu	`text`	Oui	fr / en	·
`save_badge`	Contenu	`text`	Non	fr / en	·
`tiers`	Contenu	`array`	Oui	·	2..4

Déclinaisons · 18

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

Tarifs bascule · papier
curée
pricing-toggle--paper
Tarifs bascule · papier 2
curée
pricing-toggle--paper-2
Tarifs bascule · papier 3
curée
pricing-toggle--paper-3
Tarifs bascule · encre
curée
pricing-toggle--ink
pricing-toggle · grille uniforme
générée
pricing-toggle--grid-uniform
pricing-toggle · grille auto
générée
pricing-toggle--grid-auto
pricing-toggle · grille asymétrique
générée
pricing-toggle--grid-asym
pricing-toggle · liste
générée
pricing-toggle--list
pricing-toggle · lignes séparées
générée
pricing-toggle--rows-divided
pricing-toggle · bento vedette
générée
pricing-toggle--bento-feature
pricing-toggle · vedette + split
générée
pricing-toggle--featured-split
pricing-toggle · deux colonnes
générée
pricing-toggle--two-col
pricing-toggle · alternance
générée
pricing-toggle--alternating
pricing-toggle · jeu de cartes
générée
pricing-toggle--cards-deck
pricing-toggle · liste média à gauche
générée
pricing-toggle--list-media-left
pricing-toggle · grille 3 + vedette
générée
pricing-toggle--grid-3-featured

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.

Tarifs bascule · papier
curée
pricing-toggle--paper
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Tarifs bascule · papier 2
curée
pricing-toggle--paper-2
background:paper-2
Ouvrir dans le builder
Tarifs bascule · papier 3
curée
pricing-toggle--paper-3
background:paper-3
Ouvrir dans le builder
Tarifs bascule · encre
curée
pricing-toggle--ink
background:ink
Ouvrir dans le builder
pricing-toggle · grille uniforme
générée
pricing-toggle--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
pricing-toggle · grille auto
générée
pricing-toggle--grid-auto
layout:grid-auto
Ouvrir dans le builder
pricing-toggle · grille asymétrique
générée
pricing-toggle--grid-asym
layout:grid-asym
Ouvrir dans le builder
pricing-toggle · liste
générée
pricing-toggle--list
layout:list
Ouvrir dans le builder
pricing-toggle · lignes séparées
générée
pricing-toggle--rows-divided
layout:rows-divided
Ouvrir dans le builder
pricing-toggle · bento vedette
générée
pricing-toggle--bento-feature
layout:bento-feature
Ouvrir dans le builder
pricing-toggle · vedette + split
générée
pricing-toggle--featured-split
layout:featured-split
Ouvrir dans le builder
pricing-toggle · deux colonnes
générée
pricing-toggle--two-col
layout:two-col
Ouvrir dans le builder
pricing-toggle · alternance
générée
pricing-toggle--alternating
layout:alternating
Ouvrir dans le builder
pricing-toggle · jeu de cartes
générée
pricing-toggle--cards-deck
layout:cards-deck
Ouvrir dans le builder
pricing-toggle · liste média à gauche
générée
pricing-toggle--list-media-left
layout:list-media-left
Ouvrir dans le builder
pricing-toggle · grille 3 + vedette
générée
pricing-toggle--grid-3-featured
layout:grid-3-featured
Ouvrir dans le builder

Sections liées

Même famille

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.

case-card-grid stable

Table éditoriale de cas clients en six colonnes (index, client, secteur, stack, impact, flèche) façon compte rendu d'audit.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +3 31 décl.

case-featured-grid stable

Grille de cas clients « featured » : un cas mis en avant (colonne large, cover optionnelle) plus des cas secondaires en lignes numérotées, avec chip de provenance.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +6 17 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.

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.

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.

Même catégorie

pricing-cards stable

Grille de 2 à 4 cartes de prix côte à côte avec une carte « Recommandé » mise en avant, prix, période, features et CTA par carte. Ancrage par contraste.

card-grid Pricing Sections SurvolCartesBadge +3 30 décl.

pricing-comparison-matrix stable

Matrice comparative tarifaire pour mettre en regard les fonctionnalites de 3 plans avec mise en avant de la colonne recommandee.

table Pricing Sections Défilement horizontalSurvolGlisser pour faire défiler +3 13 décl.

pricing-single-highlight stable

Offre mono-produit en grand format : une carte large centrée avec prix d'ancrage, liste de bénéfices, garantie et CTA fort. Idéal landing mono-offre.

card-grid Pricing Sections Liste2 colonnesMédia à droite +1 18 décl.

pricing-table stable

Table de prix pour présenter clairement les formules, paliers et options commerciales.

table Pricing Sections BoutonsListe3 colonnes 14 décl.

pricing-tabs-showcase stable

Showcase de formules avec onglets, cartes illustrées, listes de livrables et bande sur mesure.

tabs Pricing Sections revealtabsSurvol +7 11 décl.

Similaires

persona-attributes-grid stable

Grille persona 2×2 pain points / critères / objections / preuves avec footer méta sombre en trois colonnes.

card-grid Feature Sections Liste3 colonnes 18 décl.

feature-comparison-grid stable

Différenciation légère « nous vs eux » en grille de cartes : 2 ou 3 colonnes, lignes cochées ou barrées, colonne mise en avant. Plus léger que la table comparative.

card-grid Feature Sections ListeCartes3 colonnes 18 décl.

integrations-grid stable

Grille de logos d’intégrations groupés par catégorie (CRM, communication, données). Répond à l’objection « est-ce que ça se branche à nos outils ? » d’un coup d’œil.

card-grid Logo Sections SurvolPlusieurs imagesLogos +2 8 décl.

resource-card-grid stable

Grille de ressources téléchargeables : type (livre blanc, cookbook, outil), titre, description, format, badge gated et CTA, en 2 ou 3 colonnes.

card-grid Content Listing Sections SurvolBoutonsIcônes +3 17 décl.

booking-embed stable

Section de prise de rendez-vous intégrant le widget Cal.com (CalEmbed) avec une copy de réassurance, pour réserver un audit ou un appel.

form-panel Contact Sections DéfilementIllustration au traitListe +3 9 décl.

contact-form stable

Section contact avec formulaire (nom, email, message) et colonne coordonnées, action vers /api/contact, bilingue.

form-panel Contact Sections SurvolIllustration au traitBoutons +4 9 décl.

Code

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

{
  "type": "pricing-toggle",
  "background": "paper",
  "kicker_fr": "Tarifs · mensuel ou annuel",
  "kicker_en": "Pricing · monthly or annual",
  "h2_fr": "Choisissez votre <i>rythme</i>",
  "h2_en": "Pick your <i>cadence</i>",
  "label_monthly_fr": "Mensuel",
  "label_monthly_en": "Monthly",
  "label_annual_fr": "Annuel",
  "label_annual_en": "Annual",
  "save_badge_fr": "Économisez 20%",
  "save_badge_en": "Save 20%",
  "tiers": [
    {
      "name_fr": "Solo",
      "name_en": "Solo",
      "price_monthly": "49 €",
      "price_annual": "39 €",
      "suffix_monthly_fr": "/mois · HT",
      "suffix_monthly_en": "/month · excl. VAT",
      "suffix_annual_fr": "/mois · facturé annuellement",
      "suffix_annual_en": "/month · billed annually",
      "features_fr": [
        "1 agent éditeur",
        "3 workflows actifs",
        "5 000 actions/mois",
        "Support e-mail"
      ],
      "features_en": [
        "1 editor agent",
        "3 active workflows",
        "5,000 actions/month",
        "Email support"
      ],
      "cta": {
        "label_fr": "Démarrer",
        "label_en": "Start",
        "href": "/contact?plan=solo",
        "variant": "ghost"
      },
      "featured": false
    },
    {
      "name_fr": "Équipe",
      "name_en": "Team",
      "price_monthly": "149 €",
      "price_annual": "119 €",
      "suffix_monthly_fr": "/mois · HT",
      "suffix_monthly_en": "/month · excl. VAT",
      "suffix_annual_fr": "/mois · facturé annuellement",
      "suffix_annual_en": "/month · billed annually",
      "features_fr": [
        "5 agents éditeurs",
        "Workflows illimités",
        "50 000 actions/mois",
        "Support prioritaire"
      ],
      "features_en": [
        "5 editor agents",
        "Unlimited workflows",
        "50,000 actions/month",
        "Priority support"
      ],
      "cta": {
        "label_fr": "Choisir Équipe",
        "label_en": "Choose Team",
        "href": "/contact?plan=team",
        "variant": "primary"
      },
      "featured": true
    },
    {
      "name_fr": "Scale",
      "name_en": "Scale",
      "price_monthly": "399 €",
      "price_annual": "319 €",
      "suffix_monthly_fr": "/mois · HT",
      "suffix_monthly_en": "/month · excl. VAT",
      "suffix_annual_fr": "/mois · facturé annuellement",
      "suffix_annual_en": "/month · billed annually",
      "features_fr": [
        "Agents illimités",
        "Orchestration multi-équipes",
        "Actions illimitées",
        "CSM dédié + SLA"
      ],
      "features_en": [
        "Unlimited agents",
        "Multi-team orchestration",
        "Unlimited actions",
        "Dedicated CSM + SLA"
      ],
      "cta": {
        "label_fr": "Nous parler",
        "label_en": "Talk to us",
        "href": "/contact?plan=scale",
        "variant": "ghost"
      },
      "featured": false
    }
  ]
}

Pour un agent / MCP

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

/library/section/pricing-toggle.json

Chemin du détail machine

/library/section/pricing-toggle.json