Pricing Sections
pricing-comparison-matrix
stable Bibliothèque Contenu inline (instance)Présenter les tarifs
Matrice comparative tarifaire pour mettre en regard les fonctionnalites de 3 plans avec mise en avant de la colonne recommandee.
Instances sur le site
Global 0 instance en page composable
Aperçu
Comment l'utiliser
| 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 | · |
body | Contenu | richtext | Non | fr / en | · |
plans | Contenu | array | Oui | · | 2..4 |
rows | Contenu | array | Oui | · | 2..∞ |
Déclinaisons · 13
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 9 générées.
-
Matrice tarifaire · papier
curéepricing-comparison-matrix--paper -
Matrice tarifaire · papier 2
curéepricing-comparison-matrix--paper-2 -
Matrice tarifaire · papier 3
curéepricing-comparison-matrix--paper-3 -
Matrice tarifaire · encre
curéepricing-comparison-matrix--ink -
pricing-comparison-matrix · lignes séparées
généréepricing-comparison-matrix--rows-divided -
pricing-comparison-matrix · grille étapes
généréepricing-comparison-matrix--grid-steps -
pricing-comparison-matrix · matrice comparative
généréepricing-comparison-matrix--comparison-matrix -
pricing-comparison-matrix · cases à cocher
généréepricing-comparison-matrix--feature-check -
pricing-comparison-matrix · lignes specs
généréepricing-comparison-matrix--spec-rows -
pricing-comparison-matrix · lignes zébrées
généréepricing-comparison-matrix--striped-rows -
pricing-comparison-matrix · en-tête collant
généréepricing-comparison-matrix--sticky-header -
pricing-comparison-matrix · comparaison 2 colonnes
généréepricing-comparison-matrix--two-col-compare -
pricing-comparison-matrix · liste de contrôle
généréepricing-comparison-matrix--checklist
Comparer les déclinaisons · 13
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.
-
Matrice tarifaire · papier
curéepricing-comparison-matrix--paperbackground:paperOuvrir dans le builder -
Matrice tarifaire · papier 2
curéepricing-comparison-matrix--paper-2background:paper-2Ouvrir dans le builder -
Matrice tarifaire · papier 3
curéepricing-comparison-matrix--paper-3background:paper-3Ouvrir dans le builder -
Matrice tarifaire · encre
curéepricing-comparison-matrix--inkbackground:inkOuvrir dans le builder -
pricing-comparison-matrix · lignes séparées
généréepricing-comparison-matrix--rows-dividedlayout:rows-dividedOuvrir dans le builder -
pricing-comparison-matrix · grille étapes
généréepricing-comparison-matrix--grid-stepslayout:grid-stepsOuvrir dans le builder -
pricing-comparison-matrix · matrice comparative
généréepricing-comparison-matrix--comparison-matrixlayout:comparison-matrixOuvrir dans le builder -
pricing-comparison-matrix · cases à cocher
généréepricing-comparison-matrix--feature-checklayout:feature-checkOuvrir dans le builder -
pricing-comparison-matrix · lignes specs
généréepricing-comparison-matrix--spec-rowslayout:spec-rowsOuvrir dans le builder -
pricing-comparison-matrix · lignes zébrées
généréepricing-comparison-matrix--striped-rowslayout:striped-rowsOuvrir dans le builder -
pricing-comparison-matrix · en-tête collant
généréepricing-comparison-matrix--sticky-headerlayout:sticky-headerOuvrir dans le builder -
pricing-comparison-matrix · comparaison 2 colonnes
généréepricing-comparison-matrix--two-col-comparelayout:two-col-compareOuvrir dans le builder -
pricing-comparison-matrix · liste de contrôle
généréepricing-comparison-matrix--checklistlayout:checklistOuvrir dans le builder
Sections liées
Même famille
comparison-table stable Tableau comparatif pour clarifier les différences entre offres, options ou approches.
Défilement horizontalSurvolGlisser pour faire défiler +3 11 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.
SurvolBadgeMulti-colonnes 12 décl.data-table stable Table de données neutre générique : en-tête optionnel, colonnes avec alignements, lignes et cellules typées (emphase), zébrures et légende. Distincte des tables habillées terminal ou éditoriale.
Défilement horizontalGlisser pour faire défilerIllustration au trait +4 13 décl.department-stack stable Stack outils en table éditoriale : en-tête eyebrow et titre display, aside Callout, EditorialTable catégorie/outil/rôle.
Apparition au scrollDéfilementTableau +3 13 décl.editorial-table-block stable Comparateur éditorial : en-tête kicker mono et titre display, puis tableau EditorialTable bilingue (colonnes, lignes, caption).
Défilement horizontalApparition au scrollSurvol +6 14 décl.pricing-table stable Table de prix pour présenter clairement les formules, paliers et options commerciales.
BoutonsListe3 colonnes 14 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.
SurvolCartesBadge +3 30 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.
Liste2 colonnesMédia à droite +1 18 décl.pricing-table stable Table de prix pour présenter clairement les formules, paliers et options commerciales.
BoutonsListe3 colonnes 14 décl.pricing-tabs-showcase stable Showcase de formules avec onglets, cartes illustrées, listes de livrables et bande sur mesure.
revealtabsSurvol +7 11 décl.pricing-toggle stable Grille de cartes de prix avec bascule mensuel/annuel (CSS-only, sans JS) qui change les prix affichés et signale l'économie annuelle.
SurvolClic (bascule)Illustration au trait +4 18 décl.Similaires
newsletter-signup-section stable Section d'inscription newsletter pleine largeur (réutilise NewsletterSignup), fonds au choix dont ink pour un climax de page.
BoutonsCentré 17 décl.cta-final stable CTA final pour conclure une page et orienter vers l'action de conversion principale.
Apparition au scrollSurvolDéfilement +3 18 décl.department-cta stable Clôture CTA sur fond ink : Dingbat, titre display italique, body et deux boutons (rendez-vous + lien secondaire).
Apparition au scrollSurvolDéfilement +3 14 décl.branded-callout stable Callout de marque fond paper-2 avec kicker §, titre display italique et corps de deux paragraphes, CTA optionnel.
Apparition au scrollDéfilementBoutons +1 20 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>).
Apparition au scrollSurvolBoutons +1 17 décl.cta-band stable Bandeau CTA horizontal pour relancer une action au milieu ou en fin de parcours.
BoutonsPleine largeur 17 décl.Code
Données de la section (à placer dans sections[])
{
"type": "pricing-comparison-matrix",
"kicker_fr": "Tarifs · comparatif complet",
"kicker_en": "Pricing · full comparison",
"h2_fr": "Choisissez la <i>formule</i> adaptée",
"h2_en": "Choose the <i>plan</i> that fits",
"body_fr": "Toutes les formules incluent un audit initial et un accès à notre équipe. Pas de surprise en cours de route.",
"body_en": "All plans include an initial audit and access to our team. No surprises along the way.",
"plans": [
{
"name_fr": "Activation",
"name_en": "Activation",
"price": "2 000 €",
"price_note_fr": "paiement unique",
"price_note_en": "one-time payment",
"cta": {
"label_fr": "Démarrer",
"label_en": "Get started",
"href": "#",
"variant": "ghost"
},
"featured": false
},
{
"name_fr": "Growth System",
"name_en": "Growth System",
"price": "10 000 €",
"price_note_fr": "ou 3x 1 800 €",
"price_note_en": "or 3x 1 800 EUR",
"cta": {
"label_fr": "Choisir",
"label_en": "Choose plan",
"href": "#",
"variant": "primary"
},
"featured": true
},
{
"name_fr": "Sur-mesure",
"name_en": "Custom",
"price": "Devis",
"price_note_fr": "selon périmètre",
"price_note_en": "scope-based",
"cta": {
"label_fr": "Discuter",
"label_en": "Talk to us",
"href": "#",
"variant": "ghost"
},
"featured": false
}
],
"rows": [
{
"feature_fr": "Audit stratégie IA",
"feature_en": "AI strategy audit",
"group_fr": "Diagnostic",
"group_en": "Diagnostic",
"values": [
true,
true,
true
]
},
{
"feature_fr": "Cartographie workflows",
"feature_en": "Workflow mapping",
"group_fr": "Diagnostic",
"group_en": "Diagnostic",
"values": [
false,
true,
true
]
},
{
"feature_fr": "Workflows déployés",
"feature_en": "Deployed workflows",
"group_fr": "Execution",
"group_en": "Execution",
"values": [
"1",
"5 à 8",
"Illimité"
]
},
{
"feature_fr": "Intégrations tierces",
"feature_en": "Third-party integrations",
"group_fr": "Execution",
"group_en": "Execution",
"values": [
false,
true,
true
]
},
{
"feature_fr": "Formation équipe",
"feature_en": "Team training",
"group_fr": "Accompagnement",
"group_en": "Support",
"values": [
false,
true,
true
]
},
{
"feature_fr": "Support inclus",
"feature_en": "Included support",
"group_fr": "Accompagnement",
"group_en": "Support",
"values": [
"5 jours",
"90 jours",
"12 mois"
]
},
{
"feature_fr": "Responsable dédié",
"feature_en": "Dedicated lead",
"group_fr": "Accompagnement",
"group_en": "Support",
"values": [
false,
false,
true
]
},
{
"feature_fr": "Livrable mesurable",
"feature_en": "Measurable deliverable",
"group_fr": "Resultats",
"group_en": "Results",
"values": [
true,
true,
true
]
},
{
"feature_fr": "Reporting ROI",
"feature_en": "ROI reporting",
"group_fr": "Resultats",
"group_en": "Results",
"values": [
false,
true,
true
]
}
]
}/library/section/pricing-comparison-matrix.json
Chemin du détail machine
/library/section/pricing-comparison-matrix.json