Sommaire

24 composants disponibles. Cliquez pour aller direct au composant.

• author-card
• internal-linking
• letter-template-card
• stepper
• breadcrumb
• btn-monetisation
• card-offre-rendu
• card-parrainage
• comparateur-footer
• comparator-table
• finance-banks-comparator 🆕
• faq
• icon-list
• offer-tabs
• profile-card
• promo-hero
• pros-cons
• provider-hero
• review-modal
• reviews-module
• 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-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-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-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

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-card-parrainage

Carte d'offre parrainage 2 panneaux (filleul / parrain), avec montants, conditions, code/lien copiable. Mobile : onglets ; desktop : côte à côte.

Aperçu

Jusqu'au 31/03/2026

Je cherche un code Je parraine

Je suis filleul

80 €

offerts à l'ouverture de votre compte Fortuneo

Réservé aux nouveaux clients Fortuneo uniquement

Applicable sur un Compte Titres, PEA ou Livret

Prime versée sous 30 jours après validation du dossier

Code parrainage disponible

FORT8821

Copier le code de parrainage Copié !

Ouvrir un compte Fortuneo Voir l'offre →

Je parraine

80 €

par filleul parrainé, sans limite de cumul

Filleul doit ouvrir un Compte Titres ou PEA Fortuneo

Prime versée sous 30 jours après validation du dossier

Cumulable pour chaque nouveau filleul parrainé

Pas encore client Fortuneo ? Voir l'offre →

Pas encore client Fortuneo ? Voir l'offre →

Code

<x-card-parrainage
    provider="Fortuneo"
    logo="..."
    expiry-badge="Offre valable jusqu'au 30/06/2026"
    cta-href="https://..."
    :filleul="['amount' => '80', 'subtitle' => '...', 'conditions' => [...], 'cta_text' => '...', 'code' => 'FORT8821']"
    :parrain="['amount' => '80', 'subtitle' => '...', 'conditions' => [...], 'cta_text' => '...']"
/>

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-comparator-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-comparator-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-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-comparator-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-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-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-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-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)

Mis à jour en mai 2026 · 272 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.

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

Meilleure offre du moment

Jusqu'à 280€ offerts

Jusqu'à 280€

Voir l'offre

À partir du 01/04/2026

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

Jusqu'à 270€ offerts

Jusqu'à 270€

Voir l'offre

★ ★ ★ ★ ★ 3,7/5 Trustpilot · 16 133 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

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="['all' => 'Tous', 'app' => 'Application']"
    :reviews="$reviews">
    <x-slot:positive>...</x-slot:positive>
    <x-slot:negative>...</x-slot:negative>
</x-reviews-module>

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 13 mai 2026 par notre équipe éditoriale

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>