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-slot:cta>...</x-slot:cta>       
</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.

<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.

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

Règle : jamais de <strong> dans le lead. Les chiffres clés vivent dans x-slot:essential.

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.

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

Le rendu — vous le voyez en haut de cette page : 5 puces sur fond blanc, barre dégradée bleu, bouton de pliage à droite.

x-pros-cons — avantages / inconvénients

Override local du composant global. Pas d'icône SVG dans les titres « Avantages » / « Inconvénients ». Couleurs alignées sur les tokens bbox-news (#0a8023 success / #d71a1f error).

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

.callout — encart orange (note éditoriale)

Encart d'attention orange basé sur --v4-accent-soft. Le titre doit être enveloppé dans <span class="callout__tag"> pour être visuellement détaché du corps.

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

x-read-also — encart vert (cross-référence interne)

Encart de maillage interne. Visuellement distinct de la .callout orange (notes éditoriales) pour que le lecteur fasse la différence d'un coup d'œil. À privilégier systématiquement face à un bouton .cta qui pointerait vers une autre page du site — la pill orange est réservée aux liens d'affiliation (/selection/...) et au callback.

<x-read-also href="/box-internet/bbox-fit">
    Offre Bbox Fit Fibre à 30,99€/mois
</x-read-also>


<x-read-also
    href="/box-internet/bbox-fit"
    title="Offre Bbox Fit Fibre à 30,99€/mois"
/>

.bbn-spec — spec card 3 colonnes

Carte de caractéristiques techniques structurée en colonnes thématiques (icône + label + liste). Conçue pour remplacer les anciennes <table> de fiches techniques. Voir l'exemple sur la page Bbox Fit (section « Caractéristiques »).

<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"><svg…></svg></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>

x-offers.comparateur-box — carte d'offre unique

Pour afficher une seule offre (ex: page produit Bbox Fit), passer son ID API en prop. Le skin horizontal-cards donne le rendu compact bbox-news.

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

Pour afficher un comparateur multi-offres avec filtres, omettre ids et garder :showFilters="true". Voir departments/france-telecom/components/offers/ pour la base partagée.

.cta + .cta-wrap — bouton CTA principal

Bouton orange standard du layout, centré dans son conteneur. Le wording du label doit respecter les règles de conformité (cf. section 5).

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

.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>

Les variables CSS --v4-* sont déclarées sur .article et .hub-page, donc disponibles dans tous les <style> inline scopés sous l'un de ces wrappers. Préfixe historique « v4 » conservé pour ne pas casser les <style> existants.

Couleurs

Tokens fonctionnels (success / error)

Définis dans sites/bbox-news.com/css/app.css en variables Tailwind --color-* et utilisés notamment dans le composant x-pros-cons.

Mesures

• --v4-max : 1440px — largeur max du conteneur principal
• --v4-col : 780px — largeur de la colonne d'article (à laquelle les composants doivent se conformer)
• --v4-f : Nunito Sans, system-ui, sans-serif

Règles transverses à toute page bbox-news.com. Consigner ici toute nouvelle règle décidée pour qu'elle soit consultable par toute l'équipe.

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 (Selectra ne peut pas vendre Bouygues par téléphone)
• Labels génériques : « Comparez les offres internet », « Comparez les forfaits mobile », « Comparez les offres télécom »
• Liens d'affiliation directs /selection/bouygues-telecom/... autorisés (clic vers le site Bouygues sans contact Selectra)

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 « Résumé : … en N points »
• Pas de fait approximatif — toute donnée doit être vérifiée (API Selectra Telecom ou departments/france-telecom/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

Maillage et cartes

• Cartes de maillage minimalistes : nom + prix + « En savoir plus » (cf. gamme-bandyou)
• Couleurs distribuées sur le dégradé hero (#0b2545 → #1ec8f0 → #ea5a0a)
• Codes vert = inclus / bleu = option (quiz, tableaux)
• FAQ toujours en dernière section de l'article

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)
• Curl la page locale et confirmer HTTP 200 (jamais 500)

Composants à privilégier

En présence d'une donnée variable (prix, débit, durée), passer par l'API Selectra Telecom plutôt que de hardcoder. Pour 1 offre fixée, utiliser x-offers.comparateur-box avec ids="X". Pour un comparateur, utiliser le skin approprié (horizontal-cards compact, horizontal-cards-full détaillé, vertical-cards pour 3 colonnes, comparison-table pour confrontation directe).

Pour aller plus loin

• Pages d'exemple à jour : Bbox Fit Fibre (article + lead + essential + spec card + horizontal-cards)
• Hub d'exemple : Gamme B&You (cartes maillage minimalistes, couleurs distribuées sur le hero gradient)
• Source des composants partagés : departments/france-telecom/components/
• Source des composants spécifiques bbox-news : sites/bbox-news.com/components/