Sommaire

25 composants disponibles. Cliquez pour aller direct au composant.

• author-card
• breadcrumb
• btn-monetisation
• card-offre-rendu
• comparateur-footer
• faq
• finance-banks-comparator
• icon-list
• internal-linking
• letter-template-card
• offer-tabs
• offers-table
• partner-pill
• profile-card
• promo-hero
• pros-cons
• provider-hero
• review-modal
• reviews-module
• stepper
• sticky-footer
• sticky-subnav
• text-box
• top-welcome-offers
• verdict-card

x-author-card

Carte auteur en bas de page : photo ronde, nom, fonction, description, expérience, tags et CTA vers le profil. Slots description et experience.

Aperçu

Clara Caussel Rédactrice Comparabanques

Clara analyse les offres bancaires depuis 4 ans. Elle teste les applications, ouvre les comptes et compare les frais réels.

4 ans d'expérience

---

Banques en ligne Néobanques Cartes bancaires

En lire plus sur Clara

Code

<x-author-card
    photo="..." photo-alt="..."
    name="Clara Caussel"
    job-title="Rédactrice Comparabanques"
    :tags="['Banques en ligne', 'Néobanques']"
    profile-url="/auteurs/clara-caussel">
    <x-slot:description>Clara analyse les offres bancaires...</x-slot:description>
    <x-slot:experience>4 ans d'expérience</x-slot:experience>
</x-author-card>

x-breadcrumb

Fil d'Ariane avec injection automatique du JSON-LD BreadcrumbList. Items au format [label, url] ou ['label' => ..., 'url' => ...]. URL null = item actif (page courante).

Aperçu

Code

<x-breadcrumb :items="[
    ['Accueil', '/'],
    ['Banques', '/banques'],
    ['Boursorama Banque', null],
]" />

x-btn-monetisation

CTA principal de monétisation, ambre par défaut. Variante accent (orange Selectra) utilisée sur les pages parrainage. Le slot par défaut contient le label.

Aperçu - default (ambre)

Aperçu - accent (orange)

Code

<x-btn-monetisation href="https://..." rel="nofollow">Voir l'offre</x-btn-monetisation>
<x-btn-monetisation href="..." variant="accent" rel="nofollow">Profiter du parrainage</x-btn-monetisation>

x-card-offre-rendu

Module détaillé d'une carte bancaire : header pills (prix/network/débit), 4 figures (prix mensuel, plafond paiements, conditions de revenu, premier dépôt), score Selectra, CTA orange + welcome callout pointillé, highlights bar, accordéons collapsibles (frais étranger / conditions / points forts / points faibles).

Aperçu

de Boursorama Banque

Visa Welcome

Gratuite Visa Débit immédiat

Prix mensuel

0 €

sans conditions

Plafond paiements

3 000 €

par mois

Conditions de revenu

Aucune

Premier dépôt

50 €

à l'ouverture

Choisir cette carte Partenaire de Comparabanques

Jusqu'à 80 €

i Conditions de l'offre sous 60 jours

Sans condition de revenus

Carte virtuelle incluse

Paiements en € sans frais

Voir le détail complet Voir moins

Frais à l'étranger

Paiements zone € 0 €

Retraits zone € 0 €

Paiements hors zone € 1,69 % du montant

Retraits hors zone € 1,69 % + 1,5 €

Conditions & services

Plafond retraits 500 € par semaine

Premier dépôt requis 50 €

Carte virtuelle Incluse

Apple Pay / Google Pay Compatibles

Assurance perte/vol Oui, jusqu'à 1 600 €

Points forts

100% en ligne

Sans frais à l'étranger en zone euro

Points faibles

Pas de découvert autorisé

Plafonds bas par défaut

Code

<x-card-offre-rendu
    cardName="Visa Welcome" bankName="Boursorama Banque"
    cardImage="..." pillPrice="Gratuite" pillNetwork="Visa" pillDebit="Débit immédiat"
    score="A"
    prixMensuel="0 €" prixSub="sans conditions"
    plafondPaiement="3 000 €" conditionsRevenu="Aucune" premierDepot="50 €"
    welcomeAmount="80 €" welcomePrefix="Jusqu'à" welcomeConditions="sous 60 jours"
    :highlights="['...', '...']"
    :frais="[
        ['label' => 'Paiements zone €', 'value' => '0 €', 'highlight' => true],
        ['label' => 'Retraits hors zone €', 'value' => '1,69 % + 1,5 €'],
    ]"
    :conditions="[
        ['label' => 'Plafond retraits', 'value' => '500 € par semaine'],
        ['label' => 'Carte virtuelle', 'value' => 'Incluse'],
    ]"
    :pointsForts="['...', '...']" :pointsFaibles="['...', '...']"
    ctaHref="..." ctaLabel="Choisir cette carte"
/>

x-comparateur-footer

Bandeau bleu en bas de page mobile (md:hidden) avec titre éditorial et CTA vers /comparateur. Aucune prop, contenu codé en dur.

Aperçu (forcé visible)

Code

<x-comparateur-footer />

x-faq

FAQ accordéon Alpine. ~50 icônes disponibles via $item['icon'] : euro, shield, clock, card, phone, gift, calculator, wallet, etc. (cf. dictionnaire dans le composant).

Aperçu

Code

<x-faq title="Questions fréquentes" :items="[
    ['icon' => 'euro',   'question' => 'Quels sont les frais ?',     'answer' => '<p>...</p>'],
    ['icon' => 'shield', 'question' => 'Mon argent est-il garanti ?', 'answer' => '<p>...</p>'],
]" />

x-finance-banks-comparator

Wrapper haut niveau API-driven. Prend une liste d'offres bancaires (output FinanceApi::bankOffersPaginated()) + un archetype, applique 7 règles de logique automatique, extrait les valeurs API, et délègue le rendu à x-offers-table. Remplace les 80+ lignes de tableau hardcodé par 5.

Comment ça marche : la logique en 4 niveaux

1. Choix de l'archétype (par la page) parmi bank-cards-overview, theme-comparator, bank-vs-bank, card-show, pro-overview, pro-comparator. Définit la matrice de catégories candidates.
2. Sélection des catégories (par le wrapper) parmi 12 dispo : 7 universelles (Tenue de compte, Paiements & carte, À l'étranger, Assurances & assistances, Incidents & découvert, Promo, Avantages/inconvénients) + 5 pro (Tarification pro, Encaissement, Gestion d'entreprise, Services annexes, Épargne & rémunération). Chaque catégorie peut être ✅ toujours, ❌ jamais, ou ⚙️ conditionnelle (selon mots-clés URL, présence d'une carte premium, présence de couvertures dans le payload, etc.).
3. Sélection des lignes (par le wrapper) parmi ~58 dispo, avec masquage automatique des lignes vides partout (option B) et règles de redondance (ex : payment-limit-customizable caché si une banque a un plafond chiffré).
4. Choix de la mise en évidence (par le wrapper) selon priorité partenaire > meilleur Selectra Score > aucun highlight. Les CTA "Choisir cette carte" sont automatiquement générés pour les colonnes partenaires (/selection/{bank-slug}/compte-bancaire).

Cas d'usage par archétype

• bank-cards-overview : page d'une banque listant ses cartes. Ex : /boursorama-banque, /n26.
• theme-comparator : top des cartes filtrées par un thème. Ex : /comparatif-banque/sans-frais.
• bank-vs-bank : duel entre 2 banques. Ex : /comparatif/n26-vs-revolut.
• card-show : fiche d'une carte unique avec alternatives. Ex : /boursorama-banque/ultim.
• pro-overview / pro-comparator : pages banque pro, affichent automatiquement les catégories pro (tarification, encaissement, gestion, services annexes) à la place des perso.

Overrides explicites

Quand la page veut diverger des règles auto, 4 props acceptent une liste explicite :

• :force-categories="['avantages-inconvenients']" : ajoute une catégorie que la matrice exclurait par défaut (avantages/inconvénients par exemple est en opt-in).
• :exclude-categories="['promo']" : retire une catégorie que la matrice inclurait.
• :force-lines="['paiements-carte' => ['cashback-rate']]" : force une ligne précise dans une catégorie.
• :exclude-lines="['etranger' => ['international-pack']]" : retire une ligne précise.

Bonus visuels automatiques

• Status pills : "Gratuit", "Inclus", "Illimité", "Aucune", "Oui", "✓" → check vert dans une bulle translucide ; "Non", "Non disponible", "✗" → croix rouge. Les chaînes composées ("5 gratuits puis 1,50 €") restent en texte normal.
• Tooltips deux niveaux : par cellule (explication propre à chaque banque, ex : taux de découvert détaillé) ET par ligne (explication identique pour toutes les colonnes, ex : "Montant offert au parrain").
• Cellules deux niveaux : valeur principale en gras, sous-texte gris en dessous (ex : code promo affiché sous la prime de bienvenue).
• Masquage auto : une ligne dont toutes les cellules sont vides disparaît, la catégorie disparaît si toutes ses lignes sont vides.

Exemple en production

Voir /boursorama-banque pour la page pilote (3 cartes Welcome / Ultim / Metal, archétype bank-cards-overview, données live API).

Code minimal (5 lignes)

@php
    $offers = \Departments\FranceFinance\Support\FinanceApi::bankOffersPaginated(
        filters: ['filter[slug][]' => ['welcome-boursobank', 'ultim-boursobank', 'metal-boursobank']],
        sort: null,
        includes: COMPARABANQUES_COMPARATOR_INCLUDES,
        perPage: 10,
    );
@endphp

<x-finance-banks-comparator
    archetype="bank-cards-overview"
    :offers="$offers"
    table-title="Comparatif des cartes Boursorama Banque"
    table-source="Source : grille tarifaire · Mis à jour automatiquement via l'API Selectra"
/>

Code avec overrides

<x-finance-banks-comparator
    archetype="theme-comparator"
    :offers="$offers"
    table-title="Top des cartes voyageurs"
    :force-categories="['avantages-inconvenients']"
    :exclude-categories="['incidents-decouvert']"
    :exclude-lines="['etranger' => ['international-pack']]"
/>

Fichiers à connaître

• sites/comparabanques.fr/components/finance-banks-comparator.blade.php — wrapper
• sites/comparabanques.fr/helpers/fee-categories.php — dictionnaire des 12 catégories × ~58 lignes
• sites/comparabanques.fr/helpers/fee-extractors.php — fonctions API → string formatée
• sites/comparabanques.fr/helpers/pick-categories-for-page.php — règles de sélection
• departments/france-finance/Support/FinanceApi.php — constante COMPARATOR_INCLUDES
• tests/Unit/PickCategoriesForPageTest.php — 15 tests Pest sur les règles

x-icon-list

Liste à puces avec icône SVG. Variantes : check-blue (default), check-green, cross-red, chevron-gray, bullet-blue.

Aperçu - check-blue

Aperçu - check-green

Aperçu - cross-red

Aperçu - chevron-gray + bullet-blue

Code

<x-icon-list variant="check-green" :items="['Item 1', 'Item 2']" />

x-internal-linking

Bloc de maillage interne, 4 variantes : cards (par défaut, grille 2 col), list-icons (liste verticale avec icônes, pour pages provider), inline (encart compact mid-article, ex- bloc-maillage-contenu), tabs (hub dynamique à onglets en haut de page hub). Icônes list-icons : star, card, phone, tag, gift, users, shield, euro, chart, home, arrow. Icônes tabs : plus, refresh, clock, card, cube, users, shield.

Aperçu - cards (default)

Aperçu - list-icons

Aperçu - inline (single-line ou liste courte)

Aperçu - tabs (hub dynamique)

Code

<x-internal-linking
    title="Pour aller plus loin"
    badge="Aussi utile"
    :items="$items"
/>

<x-internal-linking
    variant="list-icons"
    :items="[
        ['label' => 'Avis Boursobank', 'url' => '/...', 'icon' => 'star'],
    ]"
/>

<x-internal-linking
    variant="tabs"
    title="Quel est votre projet bancaire ?"
    subtitle="Choisissez une démarche, on vous emmène à la bonne ressource."
    headerIcon="cube"
    :cta="['label' => 'Comparer les banques', 'url' => '/comparateur']"
    :tabs="[
        [
            'id' => 'ouvrir',
            'label' => 'Ouvrir un compte',
            'count' => '6 ressources',
            'icon' => 'plus',
            'items' => [
                ['label' => 'Meilleure banque en ligne', 'url' => '/...', 'featured' => true],
                ['label' => 'Compte de dépôt', 'url' => '/...'],
            ],
        ],
        // ... autres onglets
    ]"
/>

x-letter-template-card

Modèle de lettre éditable inline (champs jaunes contenteditable) avec bouton « Télécharger en PDF ». Le PDF est généré côté serveur via la route /api/lettre-pdf.

Aperçu

Code

<x-letter-template-card title="Lettre de résiliation" filename="resiliation">
    <span class="lettre-expediteur">
        <span contenteditable="true" data-placeholder="Votre nom"></span>
    </span>
    <p>Madame, Monsieur, ...</p>
</x-letter-template-card>

x-offer-tabs

Sélecteur de cartes par onglets : image + prix + plafonds + assurances + frais étranger + features. Une carte visible à la fois.

Aperçu

Visa Classic, 0 €/mois Visa Premier, 9 €/mois

0 €/mois

Carte d'entrée de gamme, sans condition de revenus.

Plafond paiement

1 500 €/semaine

Plafond retrait

300 €/semaine

Assurances

Aucune incluse

Hors zone euro

2,90 % paiement et retrait

Mode débit

Immédiat

• Sans condition de revenus
• Carte virtuelle incluse

9 €/mois

Carte intermédiaire avec assurances voyage incluses.

Plafond paiement

4 000 €/semaine

Plafond retrait

1 000 €/semaine

Assurances

Voyage, perte/vol

Hors zone euro

0 % en zone €, 2 % hors zone

Mode débit

Immédiat ou différé

• Assurances voyage
• Concierge 24/7

Code

<x-offer-tabs bank-name="Boursobank" default-tab="ultim" :cards="[
    'welcome' => ['name' => 'Welcome', 'price' => '0 €', 'image' => '...', 'plafondPaiement' => '...', ...],
    'ultim'   => ['name' => 'Ultim',   'price' => '0 €', 'image' => '...', ...],
]" />

x-offers-table

Tableau comparatif 3 à 5 colonnes : titre <p> centré, filtres pills par catégorie (Alpine), highlight de colonne, lignes deux niveaux, tooltips ⓘ pure CSS, status pills auto (✓ vert / ✗ rouge), footer CTA. Reçoit :columns et :categories déjà cuisinés. Pour les pages bancaires API-driven, utilise plutôt x-finance-banks-comparator qui orchestre tout.

Aperçu

Code

<x-offers-table
    :columns="[
        ['key' => 'free',  'name' => 'Free',  'price' => '0 €',  ...],
        ['key' => 'plus',  'name' => 'Plus',  'price' => '25 €', 'highlight' => true, ...],
    ]"
    :categories="[
        ['key' => 'tarif', 'category' => 'Tarification', 'icon' => '...', 'items' => [
            ['label' => 'Prix HT', 'free' => '0 €', 'plus' => '25 €'],
        ]],
    ]"
    :show-cta-row="true"
/>

x-partner-pill 🆕

Badge « Partenaire de Comparabanques » avec logo check Selectra. Remplace la légende de pied conditionnelle « ✓ indique partenaire » par une badge explicite et lisible directement au plus près du nom de la banque ou du bouton de monétisation. Une seule variante compacte, fond bleu translucide, texte bleu marine, bordure bleue accentuée pour démarquer les bords. Le caller gère la condition (lookup meta.is_partner côté provider ou au niveau offre).

Variante brute

Sous un bouton de monétisation (centrée — usage standard)

Dans une ligne de classement

En header de colonne de tableau

Dans un hero provider (à côté du nom)

Code

@
@if($isPartner)
    <x-partner-pill />
@endif

@
<x-btn-monetisation :href="$ctaHref" rel="nofollow">
    {{ $ctaLabel }}
    @if($isPartner)
        <x-slot:partnerPill>
            <x-partner-pill />
        </x-slot:partnerPill>
    @endif
</x-btn-monetisation>

x-profile-card

Carte de recommandation par profil avec 3 variantes colorées : budget (vert), travel (bleu), premium (or/violet). Affiche un badge profile, image carte, intro, bullets et CTA.

Aperçu - variant budget (mock vert)

Aperçu - variant travel (mock bleu)

Aperçu - variant premium (mock orange)

Code

<x-profile-card
    variant="budget"  
    profileName="Pour les petits budgets"
    cardName="Visa Welcome" brandName="Boursorama Banque"
    title="La carte gratuite la plus complète"
    :bullets="['...', '...', '...']"
    ctaHref="..." ctaLabel="Choisir Welcome"
/>


<x-profile-card
    variant="travel"
    cardImage="https://images.comparabanques.fr/.../carte.png"
    ...
/>

x-promo-hero

Hero bleu en dégradé avec, à droite, 3 cards d'offres en stack vertical (logo, étoiles Trustpilot, montant, CTA, urgence sur la 1^re). À gauche : eyebrow live + H1 (avec un mot mis en avant via <span class="phero-hi">) + sous-titre + 3 puces de réassurance. Deux variantes : welcome-offers (auto-fetché via le helper helpers/welcome-offers.php, top 3 offres de bienvenue partenaires consumer, cache 15 min) et custom (offres + textes fournis par le caller, pour des sélections thématiques).

Aperçu - variante welcome-offers (auto)

Vérifié le 10 juin 2026 · 284 offres analysées

Meilleures offres
promotionnelles bancaires

Comparez en 30 secondes les offres de bienvenue des banques. Jusqu'à 280 € offerts - sélectionnées par nos experts chaque mois.

42 banques comparées Comparatif 100% indépendant Notes Trustpilot vérifiées

Meilleure offre du moment

Jusqu'à 280€ d'avantages

Jusqu'à 280€

Voir l'offre

★ ★ ★ ★ ★ 4,1/5 Trustpilot · 9 394 avis

Jusqu'à 280€ offerts

Jusqu'à 280€

Voir l'offre

★ ★ ★ ★ ★ 4,4/5 Trustpilot · 10 277 avis

Jusqu'à 270€ d'avantages

Jusqu'à 270€

Voir l'offre

★ ★ ★ ★ ★ 2,3/5 Trustpilot · 3 425 avis

Aperçu - variante custom

Sélection mai 2026 · 12 offres analysées

Top 3 banques pour les voyageurs

Sans frais à l'étranger, cashback voyage, assurance incluse - notre sélection pour les nomades fréquents.

12 banques internationales 0 frais à l'étranger Assurance voyage incluse

Choix de la rédaction

Jusqu'à 200€ offerts (parrainage)

Jusqu'à 200€

Voir l'offre

Jusqu'au 30 juin 2026

★ ★ ★ ★ ★ 4,4/5

100€ offerts à l'ouverture

100€

Voir l'offre

★ ★ ★ ★ ★ 3,8/5

50€ offerts via parrainage

50€

Voir l'offre

★ ★ ★ ★ ★ 4,6/5

Code

<x-promo-hero variant="welcome-offers" />


<x-promo-hero
    variant="welcome-offers"
    title-html='Meilleures offres<br>promotionnelles <span class="phero-hi">bancaires</span>'
    subtitle="Comparez en 30 secondes les offres de bienvenue..."
    feat-badge-label="Meilleure offre du moment"
/>


<x-promo-hero
    variant="custom"
    title-html='Top 3 banques pour <span class="phero-hi">les voyageurs</span>'
    subtitle="Sans frais à l'étranger, cashback voyage..."
    feat-badge-label="Choix de la rédaction"
    eyebrow-text="Sélection mai 2026 · 12 offres analysées"
    :proof="['12 banques internationales', '0 frais à l\'étranger', 'Assurance voyage incluse']"
    :offers="$travelOffers"
/>

x-pros-cons

Avantages / inconvénients en deux blocs vert/rouge. Variantes : cards (default, 2 colonnes translucides) ou table (table HTML).

Aperçu - cards

Aperçu - table

Code

<x-pros-cons
    :pros="['Pro 1', 'Pro 2']"
    :cons="['Con 1', 'Con 2']"
/>

x-provider-hero

Hero des pages fournisseur : texte d'intro, étoiles + nb d'avis, CTA principal et CTA secondaire (peut ouvrir la modale d'avis), logo à droite. À utiliser dans <x-slot:lead> du layout article.

Aperçu

Boursorama Banque est la première banque en ligne française avec plus de 5 millions de clients. Compte sans frais, carte Welcome gratuite et offre de bienvenue jusqu'à 80 €.

4,6/5 · 3 241 avis sur App Store

Ouvrir un compte Boursorama →

Lire l'avis complet

Code

<x-provider-hero
    name="Boursorama Banque"
    logo="..." :rating="4.6" :reviews="3241" review-source="App Store"
    cta-label="Ouvrir un compte" cta-href="..."
    secondary-cta-label="Lire l'avis" secondary-cta-href="#avis">
    Boursorama Banque est la <strong>première banque en ligne</strong>...
</x-provider-hero>

x-review-modal

Modale de dépôt d'avis. S'ouvre via le store Alpine global $store.reviewModal.open = true. Affiche le score actuel + distribution + 2 derniers avis si $reviews est passé.

Aperçu

Ouvrir la modale d'avis

Votre avis est presque en ligne !

📧 Un email vient d'être envoyé à de la part de Selectra Reviews. Cliquez sur le lien envoyé pour publier votre avis.

Fermer

Quelle banque notez-vous ?

Recherchez votre banque pour partager votre expérience.

Noter

Comment nous contrôlons les avis

← Changer de banque

4,6/5

3 241 avis Selectra

5★

70%

4★

18%

3★

6%

2★

3%

1★

3%

Derniers avis

★ ★ ★ ★ ★

Julien M. · 12 mars 2026

Excellent service

Application au top, support réactif et tarifs imbattables. Je recommande.

★ ★ ★ ★ ★

Sophie L. · 5 mars 2026

Bonne expérience globale

Tout fonctionne bien sauf parfois le service client qui met du temps à répondre.

Votre note *

Titre de votre avis *

Commentaire *

/50 caractères minimum

Nom *

Adresse e-mail *

Vous recevrez un email pour confirmer votre avis (vérifiez vos spams)

Date d'expérience *

Choisissez une date au cours des 12 derniers mois

J'accepte que les informations saisies soient collectées par Selectra dans le seul but de publier mon avis client. * Je certifie sur l'honneur être ou avoir été client(e) de . *

Traitement de mes données * Obligatoire

Code

<x-review-modal
    slug="boursorama-banque"
    name="Boursorama Banque"
    :score="4.6" :total="3241" :distribution="[70, 18, 6, 3, 3]"
    :reviews="$reviews"
/>


<button @click="$store.reviewModal.open = true">Donner mon avis</button>

x-reviews-module

Module avis clients complet : header + dashboard + synthèse +/- + toolbar (recherche/tri/topics) + liste filtrable + bouton « Donner mon avis ». Slots positive et negative pour la synthèse.

Aperçu

Code

<x-reviews-module
    provider="Boursorama Banque" slug="boursorama-banque"
    eyebrow="3 241 avis clients"
    title="Avis : qu'en pensent les clients ?"
    :score="4.6" :total="3241" :distribution="[70, 18, 6, 3, 3]"
    :topics-auto="$topicsAuto ?? []"
    :reviews="$reviews">
    <x-slot:positive>...</x-slot:positive>
    <x-slot:negative>...</x-slot:negative>
</x-reviews-module>

x-stepper

Étapes verticales. Mode rich par défaut (bulles 36 px, connecteur, pill durée optionnelle), mode compact pour le rendu inline numéroté (ex- numbered-list). Props : bullet="number|check", summary, compact. Accepte :steps ou :items (alias).

Aperçu - rich, bullet=number

Aperçu - rich, bullet=check

Aperçu - compact, liste flat (ex- numbered-list)

Aperçu - compact, format stepper avec H4

Code

<x-stepper
    summary='Compte ouvert en <strong>moins de 10 minutes</strong>.'
    :steps="[
        ['title' => 'Étape 1', 'duration' => '1 min', 'desc' => '...'],
        ['title' => 'Étape 2', 'duration' => '4 à 7 j', 'isWaiting' => true, 'desc' => '...'],
    ]"
/>


<x-stepper compact :items="['Item 1', 'Item 2']" />
<x-stepper compact :items="[
    ['title' => 'Étape 1', 'content' => '...'],
]" />

x-sticky-footer

Bandeau glass mobile collé en bas (position: fixed, md:hidden), apparait après 400 px de scroll. Texte + CTA orange.

Code

<x-sticky-footer
    text="Top 3 des meilleures offres de bienvenue"
    cta="Jusqu'à 280€ offerts"
    href="/offres-promotionnelles-du-moment"
/>

<x-sticky-footer
    text="Rejoignez Revolut Business"
    cta="Et gagnez un bonus de 80 € offerts"
    href="https://..." :blank="true" :nofollow="true"
/>

x-sticky-subnav

Navigation sticky horizontale avec smooth-scroll, highlight actif (IntersectionObserver), CTA latéral apparaissant après 200 px de scroll. Lien peut switcher un onglet via 'tab' => '...'.

Aperçu

Code

<x-slot:subnav>
    <x-sticky-subnav
        :links="[
            ['target' => 'avis-expert',          'label' => 'Avis Expert'],
            ['target' => 'avis-clients-section', 'label' => 'Avis Clients', 'href' => '#avis-clients', 'tab' => 'clients'],
            ['target' => 'tarifs',               'label' => 'Tarifs'],
            ['target' => 'faq-shine',            'label' => 'FAQ'],
        ]"
        cta-label="Voir l'offre" cta-href="..."
    />
</x-slot:subnav>

x-text-box

Encadré éditorial multi-variantes. 10 variantes : info (cyan), tip (bleu), example (violet, avec calcul chiffré), alert (ambre), danger (rouge), slim (lien CTA discret), summary (en bref), summary-stats (grille 2x2 KPI), takeaway (vert, à retenir), quote (citation).

info

tip

alert

danger

takeaway

summary (en bref)

summary-stats

example (cas chiffré)

slim

quote

Code

<x-text-box variant="info" title="Mastercard ou Visa ?">
    <p>Les deux réseaux sont acceptés partout...</p>
</x-text-box>

<x-text-box variant="summary-stats" title="Les chiffres clés"
    :stats="[
        ['figure' => '0', 'unit' => '€', 'description' => 'Frais de compte'],
    ]"
/>

<x-text-box variant="example" title="Cas chiffré"
    :calculation="[
        ['section' => 'Sans frais'],
        ['label' => 'Retrait', 'value' => '0 €'],
        ['label' => 'Économies', 'value' => '114 €', 'isResult' => true],
    ]"
/>

x-top-welcome-offers

Top 3 offres de bienvenue (compte courant). Composant de rendu pur : prend un tableau d'offres normalisées (la 1^re est en featured bleu si featured=true). Le fetch + la normalisation sont faits en amont (cf. routes/web.php de la homepage).

Aperçu

280€ offerts

Gagnez 280€
offerts !

Carte à partir de

0€/mois

4,6 3,2k avis sur Trustpilot

Choisir cette offre

Jusqu'à 150€ offerts

Gagnez jusqu'à 150€
offerts !

Carte à partir de

0€/mois

4,5 2,2k avis sur Trustpilot

Choisir cette offre

Jusqu'à 120€ offerts

Gagnez jusqu'à 120€
offerts !

Carte à partir de

3€/mois

4,1 1,4k avis sur Trustpilot

Choisir cette offre

Offres vérifiées le 10 juin 2026 par notre équipe éditoriale. Toutes les banques présentées ci-dessus sont partenaires de Comparabanques.

Code

<x-top-welcome-offers :offers="$topOffers" />


<x-top-welcome-offers
    :offers="$topOffers"
    title="Notre sélection bancaire du mois"
    subtitle="Bons plans vérifiés"
    all-link-href="/banques/promotions"
    all-link-label="Voir toutes les promos →"
    :show-month-tag="false"
    :show-verified-date="false"
/>

x-verdict-card

Carte « Notre verdict » avec eyebrow + paragraphes de verdict + slot limit (badge ambre) + slot conclusion + CTA + split pros/cons en bas.

Aperçu

Code

<x-verdict-card
    cta-label="Découvrir X" cta-href="..."
    :pros="['Pro 1', 'Pro 2']"
    :cons="['Con 1', 'Con 2']">
    <p>Notre avis est positif...</p>
    <x-slot:limit>la limite est...</x-slot:limit>
    <x-slot:conclusion>Pour conclure...</x-slot:conclusion>
</x-verdict-card>