Design System bbox-news.com

x-layouts.article

Layout de référence pour toutes les pages article : passport (titre + lead + meta + L'Essentiel optionnel), corps avec sommaire latéral sticky, et bloc auteur en pied de page. La barre de progression de lecture est intégrée.

<x-layouts.article
    title="..."                       
    metaDescription="..."             
    headline="..."                    
    author="marie-tugler"
    reviewer="valentine-billod"       
    datePublished="2026-05-06"
    :readingTime="6"
    essentialSubject="la Bbox Fit"     
    :breadcrumbs="[...]"
    :cacheTags="['relevant', 'tags']"
>
    <x-slot:lead>...</x-slot:lead>
    <x-slot:essential><ul>...</ul></x-slot:essential>
    
</x-layouts.article>

x-layouts.hub

Layout dédié aux pages hub (atterrissage de catégorie). Hero gradient, recherche, sections de cartes et tags populaires. À utiliser pour tout index de section qui sert de pivot vers ses sous-pages. Les icônes des cartes passent par le dispatcher x-content.hub-icon (cf. section Icônes).

<x-layouts.hub
    title="..."
    metaDescription="..."
    :breadcrumbItems="[...]"
    :sections="[...]"
    :popularTags="[...]"
>

x-slot:lead — texte d'introduction

Texte court (1-2 phrases) affiché sous le H1 dans le hero. Donne la réponse directe à la question de la page, avec les chiffres clés. Jamais de <strong> ni de <a> dedans (cf. règles éditoriales).

<x-slot:lead>
    La Bbox Fit Fibre est l'offre fibre la moins chère de Bouygues Telecom : jusqu'à 1 Gbit/s,
    téléphonie fixe illimitée et sans TV, à 30,99€/mois pendant 12 mois puis 37,99€/mois.
</x-slot:lead>

x-slot:essential — bloc L'Essentiel

3 à 5 puces de faits clés extractibles. Le layout les rend automatiquement dans une carte blanche avec barre animée bleu pétrole et bullets check-circle. Le titre du bloc devient « Résumé : {essentialSubject} en N points » si essentialSubject est passé en prop. Le rendu est visible en haut de cette page.

<x-slot:essential>
    <ul>
        <li>Fait clé n°1 avec <strong>chiffre concret</strong>.</li>
        <li>Fait clé n°2 self-contained.</li>
    </ul>
</x-slot:essential>

Le corps d'article utilise Nunito Sans (token --v4-f) ; le chrome du site (header, footer) utilise Source Sans 3 (token Tailwind --font-sans). Échelle en vigueur dans .article article.body :

Deux couches coexistent. (1) Les variables Tailwind @theme --color-* dans css/app.css pilotent le chrome et les composants Tailwind (header, footer, cartes, boutons utilitaires). (2) Les variables --v4-* déclarées sur .article / .hub-page pilotent le corps éditorial (préfixe « v4 » conservé pour ne pas casser les <style> existants).

Couleurs éditoriales — tokens --v4-*

Couleurs Tailwind — tokens --color-*

Définis dans @theme (css/app.css), utilisables comme classes utilitaires (text-primary, bg-accent, text-success…). Palette harmonisée : ces tokens sont désormais alignés sur les --v4-* éditoriaux — une couleur de marque = une seule valeur partagée par les deux couches.

Mesures & polices

• --v4-max : 1440px (conteneur) ; --v4-col : 780px (colonne d'article) ;
• --max-width-content : 1200px ; --max-width-article : 768px (Tailwind) ;
• Police corps : Nunito Sans (--v4-f) ; police chrome : Source Sans 3 (--font-sans) ; mono : JetBrains Mono.

Tout le site utilise la librairie Phosphor via les composants <x-phosphor-*> (paquet codeat3/blade-phosphor-icons). Ils sont mis en cache par Blade — plus aucun SVG inline. Les classes de taille/couleur Tailwind se passent en attribut.

<x-phosphor-wifi-high class="w-5 h-5 text-primary" />
<x-phosphor-check-circle-fill class="w-4 h-4 text-success" />       
<x-phosphor-caret-down class="w-4 h-4" ::class="open ? 'rotate-180' : ''" />  

Échantillon des icônes utilisées sur bbox-news :

x-hub-icon — dispatcher d'icônes par nom

Pour les cartes de hub, le composant x-content.hub-icon résout une icône Phosphor par nom court (via le helper svg('phosphor-…'), cacheable). Noms disponibles : wifi, phone, tv, sparkle, lock, shield, cog, refresh, key, sim, play, ball, music, doc, shop, mail, home, calculator, chart, tag (+ remote, seule icône restée inline faute d'équivalent Phosphor).

<x-hub-icon name="wifi" />          

.cta + .cta-wrap — bouton d'action principal

Pill orange standard du layout, centrée dans son conteneur. Réservée aux liens d'affiliation (/selection/…) et au déclenchement de rappel. Pour un lien vers une autre page bbox-news, préférer x-content.read-also (vert). Le wording du label doit respecter les règles de conformité (section 11).

<div class="cta-wrap">
    <a href="/selection/bouygues-telecom/bbox-fit" class="cta">
        Voir l'offre Bbox Fit
    </a>
</div>

CTA « être rappelé » — composant callback

Déclenche la modale de rappel gratuit avec une leadSource de tracking. Wording neutre obligatoire (« expert des télécoms », jamais « conseiller Bouygues »).

<x-callback.widget leadSource="fr-ti-cs-bbnbouyguesrappel" />     

x-monetisation.cta-block — moteur-bouton unique de monétisation

LE bouton de monétisation du site : c'est le seul endroit où le bouton est dessiné. Tous les blocs de pub (gradient-banner, hero-card, hero-banner, header, pilules) l'appellent au lieu de redéfinir un bouton inline. Il gère la bascule ouvert (numéro) / fermé (rappel modal, page /rappel ou affiliation) selon les horaires du call center, et le skin (banner, hub, hero-card, hero-banner, header, pill…).

Conformité embarquée (auditée le 24/07/2026 — cf. section 11) : chaque lien sortant passe par bbox_selection() / stampReferer(), qui estampillent referer + cta + position — aucun tel: brut, aucun lien tracking.publicidees.com, toujours un /selection/… tracké. Le rel d'affiliation (nofollow sponsored noopener) est posé par le composant. Le wording et la mention « Annonce / non partenaire » restent portés par le bloc appelant, pas par le bouton.

<x-monetisation.cta-block
    skin="banner"
    :phoneHref="$phoneHref"         
    phoneDisplay="01&nbsp;86&nbsp;65&nbsp;29&nbsp;98"
    provider="bouygues" offer="box"  
    closedBehavior="affiliate"
    cta="banner" />

Le composant x-content.offer-badge affiche une pastille de métadonnée d'offre (pill bordée, icône Phosphor + libellé). 9 variantes sémantiques disponibles via la prop variant.

<x-offer-badge variant="green">Fibre verte</x-offer-badge>
<x-offer-badge variant="fixed">Prix bloqué</x-offer-badge>

Quatre variantes de .callout partagent la même structure (titre en .callout__tag détaché + corps) ; seule la palette change. Le lecteur distingue d'un coup d'œil la nature de l'encart.

.callout — note éditoriale (orange)

<div class="callout">
    <span class="callout__tag">Internet garanti avec Bouygues</span>
    <p>Corps du message…</p>
</div>

.callout--example — exemple concret (bleu)

.callout--alert — alerte (rouge)

x-read-also — maillage interne (vert)

Encart de cross-référence interne, visuellement distinct de la .callout orange. À privilégier face à un bouton .cta qui pointerait vers une autre page bbox-news.

<x-read-also href="/box-internet/fibre">
    Comparer les offres box fibre Bouygues
</x-read-also>

.pull — citation mise en exergue

Bordure gauche orange, texte en avant. Pour faire ressortir une affirmation forte au milieu du corps.

<div class="pull">
    L'affirmation à mettre en avant, sans guillemets.
</div>

Override local de x-content.pros-cons : pas d'icône SVG dans les titres, couleurs alignées sur les tokens bbox-news (#0a8023 success / #d71a1f error).

<x-pros-cons
    :pros="['Avantage 1', 'Avantage 2']"
    :cons="['Inconvénient 1']"
/>

Encart de verdict signé, repris de la page /avis (clôture de la section « Faut-il souscrire ? »). Avatar, nom et fonction sont tirés de config('cms.authors.*'), le picto vient de x-phosphor-seal-check et le CTA d'affiliation ferme le bloc. À réserver à un verdict éditorial signé — pas un simple encadré.

@php $expert = config('cms.authors.marie-tugler'); @endphp
<div class="bbn-expert">
    @if(!empty($expert['avatar']))
        <img class="bbn-expert__avatar" src="{{ $expert['avatar'] }}" alt="{{ $expert['name'] }}" width="56" height="56" loading="lazy">
    @endif
    <div class="bbn-expert__body">
        <div class="bbn-expert__kicker"><x-phosphor-seal-check /> L'avis de {{ $expert['name'] }}</div>
        <div class="bbn-expert__role">{{ $expert['title'] }}</div>
        <div class="bbn-expert__verdict"><strong>Verdict en une phrase</strong>, puis 2-3 phrases de nuance.</div>
        <div class="bbn-expert__cta">
            <a href="..." target="_blank" rel="nofollow sponsored noopener" class="bbn-expert__btn">
                Souscrire en ligne <x-phosphor-arrow-right />
            </a>
        </div>
    </div>
</div>

L'avis de Marie Tugler

Spécialiste des offres Bouygues Telecom

Oui, nous recommandons Bouygues Telecom, surtout aux foyers éligibles à la fibre. Meilleure note clients des grands opérateurs (3,89/5), meilleur débit fibre réel et tarifs compétitifs : c'est un choix sûr pour qui veut un bon équilibre prix/réseau ou une offre sans engagement (B&You). Si un service client irréprochable est votre priorité, comparez d'abord avec Orange et Free.

Souscrire Bouygues en ligne

Carte de caractéristiques techniques en colonnes thématiques (icône Phosphor + label + liste). Remplace les anciennes <table> de fiches techniques.

<div class="bbn-spec">
    <h3 class="bbn-spec__title">Caractéristiques techniques</h3>
    <div class="bbn-spec__grid">
        <div class="bbn-spec__col">
            <div class="bbn-spec__icon"><x-phosphor-ruler /></div>
            <p class="bbn-spec__label">Dimensions</p>
            <ul class="bbn-spec__list"><li>25 × 24 × 5 cm</li></ul>
        </div>
        <!-- 2 autres colonnes… -->
    </div>
</div>

Les offres sont toujours tirées de l'API Selectra Telecom (jamais de prix hardcodé). Pour une offre unique, passer son ID ; pour un comparateur, garder les filtres. Plusieurs skins partagés (departments/france-telecom/components/offers/).

<x-offers.comparateur-box
    ids="2550"                  
    skin="horizontal-cards"
    :showFilters="false"
/>

Les drapeaux tricolores (data France) et les toggles réactifs check/✗ de ces cartes restent en SVG inline (aucun équivalent Phosphor / rendu réactif). Comparateur multi-offres avec filtres en live sur la page forfaits 5G Bouygues.

Comparateur mobile : x-offers.comparateur-mobile

Jumeau mobile de comparateur-box : mêmes skins, même API, filtres data/prix/5G. Les cartes délèguent au même bouton de monétisation et portent la légende de classement (sélection non exhaustive, critère, provenance, référencement gratuit).

<x-offers.comparateur-mobile skin="vertical-cards" :ids="$ids" :showFilters="false" />

Données clés & jauge de prix

• x-content.key-figures : bande compacte de chiffres (valeur + unité + label), alimentée par :stats depuis le data-file (aucun chiffre en dur) ;
• x-content.price-gauge : frise situant le prix de l'offre dans la gamme ou face au marché. Prix live via API, le prop :price n'est qu'un repli.

<x-content.key-figures :stats="$facts" />
<x-content.price-gauge :price="7" label="Petit BiG" match-slug="forfait-1-go" title="Le prix du Petit BiG" />

Relier les pages entre elles selon le contexte : un lien éditorial isolé dans le corps, un encart regroupant plusieurs liens, ou une grille de cartes sur les pages hub. Les boutons d'affiliation (/selection/...) gardent la pilule orange .cta — ils ne relèvent pas du maillage.

Version 1 seul lien — x-content.read-also

Callout vert pour un lien éditorial isolé, en remplacement d'un « consultez notre page X » en prose. Préfixe par défaut À lire aussi, surchargeable (À voir aussi, À découvrir).

<x-content.read-also href="/guides/reseau/couverture-5g"
    title="Couverture 5G Bouygues : où en est le déploiement ?" />

{{-- préfixe surchargé, contenu en slot --}}
<x-content.read-also href="/guides/tv/chaine" prefix="À découvrir">
    Liste des chaînes TV Bouygues
</x-content.read-also>

Version plusieurs liens — callout en liste

Quand plusieurs pages se rattachent au même point, deux options, jamais empiler les encarts : le composant x-content.read-also-list (kicker « Articles liés » surchargeable + liste, alimenté par :links = tableau href/title/desc optionnel, à passer via une variable PHP), ou un callout callout--read-also écrit à la main.

<x-content.read-also-list :links="$links" prefix="Articles liés" />

<div class="callout callout--read-also">
    <p><strong>Sur le même sujet :</strong></p>
    <ul>
        <li><a href="/box-internet/bbox-fit">Bbox Fit : l'offre fibre la moins chère</a></li>
        <li><a href="/box-internet/bbox-must">Bbox Must : fibre et TV</a></li>
        <li><a href="/box-internet/bbox-ultym">Bbox Ultym : le haut de gamme</a></li>
    </ul>
</div>

Version carte — cartes de maillage (hubs)

Pour relier un groupe de pages d'une même thématique sur les pages hub, deux composants :

• x-content.card-grid : grille de cartes de navigation « Pour aller plus loin » (démarches, panne…), alimentée par :cards (tableau nom/sous/url/tint/accent) ;
• x-content.related-articles : grille « Articles liés » automatique entre les pages d'un même cluster (config('cms.clusters')), sans prop, titres et visuels extraits des pages du cluster.

<x-content.card-grid :cards="$sousPages" />
<x-content.related-articles />

Exemple de grille sur Gamme B&You ou hub Panne.

Frise horizontale défilante (auto-scroll + flèches Phosphor) reliant les rétrospectives annuelles. Utilisée sur les pages /actualites/{annee}.

<x-actualites-timeline :currentYear="2024" />

Trois formats de CTA monétisation, tous pilotés par config('cms.monetisation') (numéros, lead sources, horaires) avec bascule automatique appel ↔ affiliation selon les heures d'ouverture. Selectra n'étant pas partenaire Bouygues, la mention « Annonce » et le wording neutre sont obligatoires.

x-monetisation.hero-banner — bandeau hero full-bleed

Ancré tout en haut de page, au-dessus du fil d'Ariane, via le slot heroMonetisation du layout.

<x-slot:heroMonetisation>
    <x-monetisation.hero-banner mode="guides" />
</x-slot:heroMonetisation>

x-monetisation.gradient-banner — bandeau in-content

Même données, inséré dans le flux de l'article. Modes : contact, resiliation, demarches, guides, box, mobile, pro, promos, comparatifs, offers.

<x-monetisation.gradient-banner mode="guides" />

x-monetisation.sticky-footer-cta — barre collante (mobile)

Barre fixée en bas d'écran (mobile), bascule appel direct ↔ devis/lien selon les heures. Position fixed — non prévisualisable inline, visible sur toute page mobile.

Composants Alpine.js autonomes. À insérer tels quels : la logique vit dans le composant. Les outils qui portent un CTA de monétisation embarquent déjà leurs règles (mention non-partenaire, attribution, wording opérateur-agnostique).

• x-tools.eligibility-widget : test d'éligibilité fibre/box par adresse (Base Adresse Nationale) ;
• x-tools.comparateur-quiz : mini-diagnostic « quelle offre pour vous ? » en 3 questions (CTA internes vers les pages offres) ;
• x-tools.box-debit-quiz : « votre box est-elle assez rapide ? » → débit attendu (API) + upsell d'affiliation vers le palier supérieur ;
• x-tools.speed-test : test de débit réel (serveurs Cloudflare, aucune donnée conservée) ;
• x-tools.chaines-quiz : quiz d'aide au choix de bouquet TV (nécessite :data) ;
• x-tools.chaine-finder : recherche « dans quel bouquet se trouve ma chaîne ? » (nécessite :data) ;
• x-tools.options-finder : table filtrable des chaînes/bouquets en option avec prix, rendue côté serveur (nécessite :data) ;
• x-callback-modal : modale de rappel (override site du composant global, filtrée par les horaires) déclenchée par l'événement open-callback-modal.

<x-tools.eligibility-widget />
<x-tools.comparateur-quiz />
<x-tools.box-debit-quiz />
<x-tools.speed-test />
<x-tools.chaines-quiz :data="$chaines" />
<x-tools.chaine-finder :data="$chaines" />
<x-tools.options-finder :data="$chaines" />

Conformité — Selectra non-partenaire Bouygues

• Jamais « conseiller Bouygues », « expert Bouygues » ou « conseiller Bouygues Telecom »
• Toujours « expert des télécoms », « conseiller télécom » ou « experts télécoms »
• Jamais le numéro Selectra (01 86 65 29 98) dans title= ou metaDescription=
• Jamais d'emoji téléphone (📞 ☎) dans les metatags
• Jamais « Souscrire votre Bbox », « Comparez les forfaits Bouygues » comme label de CTA téléphone
• Labels génériques : « Comparez les offres internet », « Comparez les forfaits mobile »
• Liens d'affiliation directs /selection/bouygues-telecom/... autorisés

Intro / lead

• Pas de <strong> dans x-slot:lead
• Pas de <a> dans le lead — les liens vivent dans le corps
• Lead = réponse directe en 1-2 phrases, avec les chiffres clés non gras
• Les chiffres mis en valeur vivent dans x-slot:essential (gras autorisés là)

L'Essentiel

• 3 à 5 puces, chacune avec un fait concret (chiffre, durée, condition)
• Chaque puce extractible hors contexte (cible AI Overviews)
• Passer essentialSubject="…" au layout pour le titre dynamique
• Pas de fait approximatif — toute donnée doit être vérifiée (API Selectra Telecom ou knowledge)

Sources de données autorisées

• API Selectra Telecom : telecom-comparator.selectra.com/api/v1/?app=fr (offres live)
• Connaissance interne : departments/france-telecom/knowledge/ (nPerf, ARCEP, fournisseurs)
• Toute autre source externe doit être signalée à Marie avant publication

Liens d'affiliation

• Toujours /selection/bouygues-telecom/... ou /selection/{provider}/...
• Lien unique B&You toute gamme : /selection/bouygues-telecom/forfaits-b-and-you
• Jamais tracking.publicidees.com en dur dans une page

Avant de publier une page

• Vérifier l'équilibre des balises (<section>, <div>, <p>, <ul>) — un déséquilibre casse le layout en 500
• Vérifier la balance Blade (@php / @endphp, @if / @endif, @foreach / @endforeach)
• Vérifier la ponctuation des listes (intermédiaire ;, dernière .)
• Vérifier qu'aucun H3 n'est isolé (un H2 avec sous-H3 doit en avoir au moins 2)
• Icônes : <x-phosphor-*> uniquement, jamais de SVG inline
• Curl la page locale et confirmer HTTP 200 (jamais 500)

Pour aller plus loin

• Page d'exemple : Bbox Fit Fibre (article + lead + essential + spec card + cartes)
• Hub d'exemple : Gamme B&You (cartes maillage, couleurs sur le hero gradient)
• Composants partagés : departments/france-telecom/components/
• Composants spécifiques bbox-news : sites/bbox-news.com/components/

Composants pilotés par l'API (notes, distribution, avis, KPI opérateur). Chacun porte ses règles de conformité (article L111-7-2 : organisme, nombre d'avis, note moyenne, dates de publication et d'expérience, critère de tri, mention « un avis isolé n'est pas représentatif ») — on les pose sur une page sans re-vérifier. slug = opérateur ; passer providerId pour filtrer les avis Selectra par opérateur (Bouygues = 16). Aucune démo live ici : ces composants appellent l'API Reviews (token absent en local).

x-reviews.reviews-distribution : distribution des avis + liste filtrable

Panneau complet : note moyenne, répartition par étoile, mentions fréquentes, recherche, tri (récents / qualité / meilleures / basses notes), dates expérience + publication par avis, lien « Comment nous contrôlons les avis » vers la méthodologie. Toujours passer un title explicite (le défaut évite désormais tout nom de site étranger).

<x-reviews.reviews-distribution slug="bouygues" title="Avis clients Bouygues Telecom" />

x-reviews.ratings-table : tableau multi-plateformes + moyenne pondérée

Note et nombre d'avis par plateforme, plus une moyenne pondérée. Le tableau est piloté par l'API (jamais fait main). showReviews ajoute sous la table la liste des derniers avis Selectra.

<x-reviews.ratings-table slug="bouygues" :providerId="16" :showReviews="true" />

x-reviews.expert-opinions : KPI opérateur (ARCEP / nPerf)

Carte de KPI factuels (satisfaction ARCEP, clients fixe, fidélité, débits nPerf), toutes issues de l'API, avec les sources citées en pied. Contrepartie « chiffrée » de l'avis rédactionnel x-content.expert-verdict.

<x-reviews.expert-opinions slug="bouygues" />

x-reviews.review-form : dépôt d'avis (modale)

Formulaire de dépôt vérifié : note, titre, avis, date d'expérience obligatoire, consentement RGPD, e-mail jamais publié. Deux placements : inline (bandeau dans le flux) ou afterHero (carte chevauchant le hero).

<x-reviews.review-form slug="bouygues" name="Bouygues Telecom" :logoUrl="$logo" placement="inline" />