Pricing Sections
pricing-tabs-showcase
stable Bibliothèque Contenu inline (instance)Présenter les tarifs, Comparer les options
Showcase de formules avec onglets, cartes illustrées, listes de livrables et bande sur mesure.
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 | · |
h1 | Contenu | text | Non | fr / en | · |
h2 | Contenu | text | Non | fr / en | · |
lede | Contenu | text | Non | fr / en | · |
tabs | Contenu | array | Oui | · | 2..4 |
highlight | Contenu | object | Non | · | · |
Déclinaisons · 11
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 7 générées.
-
Tarifs onglets · papier
curéepricing-tabs-showcase--paper -
Tarifs onglets · papier 2
curéepricing-tabs-showcase--paper-2 -
Tarifs onglets · papier 3
curéepricing-tabs-showcase--paper-3 -
Tarifs onglets · encre
curéepricing-tabs-showcase--ink -
pricing-tabs-showcase · onglets horizontaux
généréepricing-tabs-showcase--horizontal-tabs -
pricing-tabs-showcase · onglets verticaux
généréepricing-tabs-showcase--vertical-tabs -
pricing-tabs-showcase · segmenté
généréepricing-tabs-showcase--segmented -
pricing-tabs-showcase · pilules
généréepricing-tabs-showcase--pills -
pricing-tabs-showcase · onglets soulignés
généréepricing-tabs-showcase--underline-tabs -
pricing-tabs-showcase · onglets encadrés
généréepricing-tabs-showcase--boxed-tabs -
pricing-tabs-showcase · rail vertical
généréepricing-tabs-showcase--vertical-rail
Comparer les déclinaisons · 11
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 onglets · papier
curéepricing-tabs-showcase--paperOuvrir dans le builder -
Tarifs onglets · papier 2
curéepricing-tabs-showcase--paper-2background:paper-2Ouvrir dans le builder -
Tarifs onglets · papier 3
curéepricing-tabs-showcase--paper-3background:paper-3Ouvrir dans le builder -
Tarifs onglets · encre
curéepricing-tabs-showcase--inkbackground:inkOuvrir dans le builder -
pricing-tabs-showcase · onglets horizontaux
généréepricing-tabs-showcase--horizontal-tabslayout:horizontal-tabsOuvrir dans le builder -
pricing-tabs-showcase · onglets verticaux
généréepricing-tabs-showcase--vertical-tabslayout:vertical-tabsOuvrir dans le builder -
pricing-tabs-showcase · segmenté
généréepricing-tabs-showcase--segmentedlayout:segmentedOuvrir dans le builder -
pricing-tabs-showcase · pilules
généréepricing-tabs-showcase--pillslayout:pillsOuvrir dans le builder -
pricing-tabs-showcase · onglets soulignés
généréepricing-tabs-showcase--underline-tabslayout:underline-tabsOuvrir dans le builder -
pricing-tabs-showcase · onglets encadrés
généréepricing-tabs-showcase--boxed-tabslayout:boxed-tabsOuvrir dans le builder -
pricing-tabs-showcase · rail vertical
généréepricing-tabs-showcase--vertical-raillayout:vertical-railOuvrir dans le builder
Sections liées
Même famille
feature-tabs stable Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.
Défilement horizontalSurvolClic (bascule) +9 7 décl.offer-rail stable Offres en onglets (familles) : diptyque ou trio de cartes relie a une rangee de services par une dorsale line-art dessinee au scroll. Une branche peut etre teintee (token --complementary). Vanilla JS aria, 0 dependance.
Apparition au scrollSurvolClic (bascule) +7 7 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-comparison-matrix stable Matrice comparative tarifaire pour mettre en regard les fonctionnalites de 3 plans avec mise en avant de la colonne recommandee.
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.
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-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
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.
Boutons2 colonnesScindé 27 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.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.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.
Illustration au traitListe3 colonnes 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.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.
DéfilementIllustration au traitListe +3 9 décl.Code
Données de la section (à placer dans sections[])
{
"type": "pricing-tabs-showcase",
"background": "paper",
"kicker_fr": "§ Nos formules",
"kicker_en": "§ Plans",
"h2_fr": "Des formules adaptées à vos <i>besoins</i>.",
"h2_en": "Plans adapted to your <i>needs</i>.",
"lede_fr": "Choisissez une base claire, puis ajustez le périmètre au diagnostic.",
"lede_en": "Choose a clear base, then adjust the scope through diagnosis.",
"tabs": [
{
"label_fr": "Un projet",
"label_en": "One project",
"cards": [
{
"title_fr": "Lancement",
"title_en": "Launch",
"body_fr": "Pour partir de zéro avec une présence claire.",
"body_en": "To start from zero with a clear presence.",
"features_fr": [
"Landing page",
"Copywriting",
"SEO de base"
],
"features_en": [
"Landing page",
"Copywriting",
"Base SEO"
],
"cta": {
"label_fr": "Choisir lancement",
"label_en": "Choose launch",
"href": "/contact?offer=lancement",
"variant": "ghost"
}
},
{
"title_fr": "Refonte",
"title_en": "Rebuild",
"body_fr": "Pour remettre un site existant au niveau.",
"body_en": "To bring an existing site up to standard.",
"features_fr": [
"Audit",
"Direction artistique",
"Tracking"
],
"features_en": [
"Audit",
"Art direction",
"Tracking"
],
"cta": {
"label_fr": "Choisir refonte",
"label_en": "Choose rebuild",
"href": "/contact?offer=refonte",
"variant": "primary"
},
"featured": true
},
{
"title_fr": "Migration",
"title_en": "Migration",
"body_fr": "Pour changer de socle sans perdre l’acquis.",
"body_en": "To change foundation without losing what works.",
"features_fr": [
"Redirections",
"Performance",
"Formation"
],
"features_en": [
"Redirects",
"Performance",
"Training"
],
"cta": {
"label_fr": "Choisir migration",
"label_en": "Choose migration",
"href": "/contact?offer=migration",
"variant": "ghost"
}
}
]
},
{
"label_fr": "Équipe dédiée",
"label_en": "Dedicated team",
"cards": [
{
"title_fr": "Kick start",
"title_en": "Kick start",
"body_fr": "Un rythme léger pour tenir le cap.",
"body_en": "A light rhythm to keep momentum.",
"features_fr": [
"Priorités",
"Correctifs",
"Reporting"
],
"features_en": [
"Priorities",
"Fixes",
"Reporting"
],
"cta": {
"label_fr": "Démarrer",
"label_en": "Start",
"href": "/contact?plan=kick-start",
"variant": "ghost"
}
},
{
"title_fr": "Boost",
"title_en": "Boost",
"body_fr": "Des itérations régulières sur acquisition et site.",
"body_en": "Regular iterations on acquisition and site.",
"features_fr": [
"SEO/GEO",
"Landing pages",
"Dashboard"
],
"features_en": [
"SEO/GEO",
"Landing pages",
"Dashboard"
],
"cta": {
"label_fr": "Accélérer",
"label_en": "Accelerate",
"href": "/contact?plan=boost",
"variant": "ghost"
}
},
{
"title_fr": "Growth",
"title_en": "Growth",
"body_fr": "La formule de pilotage recommandée.",
"body_en": "The recommended steering plan.",
"features_fr": [
"Roadmap",
"CRM",
"Pilotage"
],
"features_en": [
"Roadmap",
"CRM",
"Steering"
],
"cta": {
"label_fr": "Choisir Growth",
"label_en": "Choose Growth",
"href": "/contact?plan=growth",
"variant": "primary"
},
"featured": true
}
]
}
]
}/library/section/pricing-tabs-showcase.json
Chemin du détail machine
/library/section/pricing-tabs-showcase.json