Design System

<div data-vertical="broadband">
    <div class="tb">...</div>   
    <div class="is-filled">...</div>
</div>


<div class="vertical-energy-france">
    <div class="tb">...</div>   
</div>


<div style="--accent:#FA7C30; --accent-ink:#B0531A;">
    ...
</div>

<div class="is-filled">
    <span class="is-label">In short</span>
    <p class="is-title">Block title</p>
    <p class="is-desc">Summary text with <b>emphasis</b>.</p>
    <!-- Optional 2-col grid -->
    <div class="is-grid">
        <div>
            <p class="is-col-title">Label</p>
            <ul class="blist check-b">...</ul>
        </div>
        <div>
            <p class="is-col-title">Label</p>
            <ul class="blist num-a">...</ul>
        </div>
    </div>
</div>

<div class="promo-cta">
    <div class="promo-cta__inner">
        <div class="promo-cta__body">
            <p class="promo-cta__kicker">Exclusive Selectra deal</p>
            <p class="promo-cta__title">Save 10% on your GoMoWorld eSIM for France</p>
            <p class="promo-cta__desc">Apply code <span class="promo-cta__code">SELECTRA10</span> at checkout.</p>
        </div>
        <a href="/telecom/selection/PROVIDER/esim" class="promo-cta__btn">
            See plans & prices
            <x-phosphor-caret-right-bold class="w-3.5 h-3.5" />
        </a>
    </div>
</div>

<div class="tb">
    <span class="tb-label"><span class="glyph">💡</span> Good to know</span>
    <h4>Optional H4 title</h4>
    <p>Body text with <b>bold</b>.</p>
</div>


<div class="tb">
    <span class="tb-label"><span class="glyph">⚠</span> Heads up</span>
    <p>Warning text.</p>
</div>


<div class="tb">
    <span class="tb-label"><span class="glyph">★</span> Tip</span>
    <h4>Title</h4>
    <p>Text.</p>
</div>

<a href="/broadband-phone-france/..." class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3 mb-4 text-sm no-underline hover:border-orange-300 hover:bg-orange-50 transition-colors group not-prose" style="text-decoration:none;">
    <span class="font-bold text-xs uppercase tracking-wider shrink-0" style="color:var(--accent,#FA7C30)">See also</span>
    <span class="w-px h-4 bg-gray-200 shrink-0"></span>
    <span class="font-medium text-gray-800 flex-1">Link title</span>
    <svg class="w-4 h-4 shrink-0 text-gray-400 group-hover:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</a>

<div class="multiple-link">
    <p><span class="multiple-link__label">Read next:</span></p>
    <ul class="blist arrow-b">
        <li><span class="marker">→</span><span><a href="...">Link title</a> ;</span></li>
        <li><span class="marker">→</span><span><a href="...">Link title</a> ;</span></li>
        <li><span class="marker">→</span><span><a href="...">Last link</a>.</span></li>
    </ul>
</div>

<span class="chip accent">Fibre</span>
<span class="chip ghost">ADSL</span>


<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">eSIM</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-purple-100 text-purple-700">5G</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Sans engagement</span>


<span class="ynbox yes">✓</span>
<span class="ynbox no">✗</span>
<span class="ynbox partial">•</span>

<ul class="blist check-b">
    <li><span class="marker">✓</span><span>Item with <b>bold</b></span></li>
</ul>


<ul class="blist cross-b">
    <li><span class="marker">✗</span><span>Limitation</span></li>
</ul>


<ol class="blist num-a">
    <li><span class="marker">1</span><span>Step one</span></li>
    <li><span class="marker">2</span><span>Step two</span></li>
</ol>


<ul class="blist arrow-b">
    <li><span class="marker">→</span><span><b>Label</b>: Detail</span></li>
</ul>


<div class="list-card">
    <p class="list-name">Card title</p>
    <ul class="blist check-b">...</ul>
</div>

<p class="ps-intro-title">Section title</p>
<p class="ps-intro-desc">Short intro.</p>
<div class="ps-timeline"> 
    <div class="ps-tl-step is-done">    
        <div class="ps-tl-node">1</div>
        <p class="ps-tl-kicker">Day 1</p>
        <p class="ps-tl-title">Title</p>
        <p class="ps-tl-desc">Description.</p>
    </div>
    <div class="ps-tl-step is-current"> 
        <div class="ps-tl-node">2</div>
        ...
    </div>
    <div class="ps-tl-step">            
        <div class="ps-tl-node">3</div>
        ...
    </div>
</div>

<div class="faq-a">
    <details>
        <summary>
            Question text
            <span class="toggle">
                <span class="lbl-open">Read more <svg ...chevron .../></span>
                <span class="lbl-close">Close <svg .../></span>
            </span>
        </summary>
        <div class="faq-body">
            <div class="faq-answer">
                <p>Answer paragraph.</p>
            </div>
        </div>
    </details>
    <!-- repeat for each Q -->
</div>

<div class="toc">
    <h5>Contents</h5>
    <ol>
        <li><span class="n">01</span><a href="#section-id">Section title</a></li>
        <li><span class="n">02</span><a href="#section-id">Section title</a></li>
    </ol>
</div>

<div class="t-wrap">
    <table class="t t--simple">
        <caption>Optional caption</caption>
        <thead><tr><th>Col</th><th>Price</th></tr></thead>
        <tbody>
            <tr>
                <th>Row header</th>
                <td class="num">9,99€</td> 
            </tr>
        </tbody>
    </table>
</div>
<p class="t-foot">Source / footnote.</p>

<div class="t-wrap">
    <table class="t t--simple">...</table>
</div>
<p class="tbl-note">*Footnote or update date.</p>

<div class="cmp-wrap">
    <table class="t t--cmp">
        <thead>
            <tr>
                <th class="c-label"></th>
                <th class="offer">
                    <p class="cmp-brand">Brand</p>
                    <p class="cmp-plan">Plan</p>
                    <p class="cmp-price">9,99€ <span class="per">/mo</span></p>
                </th>
                <th class="offer is-pick">
                    <span class="cmp-tag">Our pick</span>
                    ...
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Feature</th>
                <td>Value</td>
                <td class="is-pick">Highlighted</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td><a href="..." class="cmp-cta">See offer →</a></td>
                <td class="is-pick"><a href="..." class="cmp-cta primary">Subscribe →</a></td>
            </tr>
        </tfoot>
    </table>
</div>

<table class="t t--matrix">
    <thead>
        <tr>
            <th></th>
            <th>Provider A</th>
            <th class="with-accent">Provider B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Feature</th>
            <td><span class="ynbox yes">✓</span></td>
            <td class="highlight-col"><span class="ynbox yes">✓</span></td>
        </tr>
    </tbody>
</table>

<table class="t t--rank">
    <thead><tr><th>#</th><th>Provider</th><th>Price</th></tr></thead>
    <tbody>
        <tr class="is-top"> 
            <td><span class="rank-pos">1</span></td>
            <td>
                <div class="brand-cell">
                    <div class="brand-logo">Or</div> 
                    <div>
                        <p class="brand-name">Orange</p>
                        <p class="brand-meta">Subtitle</p>
                    </div>
                </div>
            </td>
            <td class="num">34,99€/mo</td>
        </tr>
        <tr> ...</tr>
    </tbody>
</table>

<table class="t t--tiers">
    <thead>
        <tr>
            <th></th>
            <th>Essential</th>
            <th class="tier-featured">Standard</th> 
            <th>Premium</th>
        </tr>
        <tr> 
            <th></th>
            <th>FROM 20€</th>
            <th class="tier-featured">FROM 30€</th>
            <th>FROM 45€</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Feature</td>
            <td>Value</td>
            <td class="tier-featured"><b>Featured value</b></td>
            <td>Value</td>
        </tr>
    </tbody>
</table>

<div>
    <div class="step-row">
        <div class="step-num">1</div>
        <div>
            <p class="step-title" style="margin-top:0">Title</p>
            <p class="step-desc">Description.</p>
        </div>
    </div>
    <div class="step-row">
        <div class="step-num">2</div>
        <div>
            <p class="step-title" style="margin-top:0">Title</p>
            <p class="step-desc">Description.</p>
        </div>
    </div>
</div>

<div class="sb-steps">
    <div class="sb-step">
        <div class="sb-step-num">0<span class="zero">1</span></div>
        <div>
            <div class="sb-step-head">
                <p class="sb-step-title">Step title</p>
                <span class="sb-step-dur">5 min</span>
            </div>
            <div class="sb-step-body">
                <p>Description. <strong>Key term.</strong></p>
                <!-- Optional sub-list -->
                <ul class="sb-step-sub">
                    <li>Detail one</li>
                    <li>Detail two</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<x-expert-quote
    name="Valentine"
    title="Editor at Selectra"
    avatar="https://images.selectra.info/en.selectra.info/team/valentine-billod.webp"
    label="Our editorial take">
    Your opinion here — HTML like <strong> and links is supported.
</x-expert-quote>


<x-expert-quote name="Valentine" title="Editor at Selectra">
    Short verdict.
</x-expert-quote>

<div class="verdict-card">
    <div class="verdict-item">
        <div class="vi-dot good">✓</div>
        <div class="vi-text">Pro point with <strong>emphasis</strong></div>
    </div>
    <div class="verdict-item">
        <div class="vi-dot warn">!</div>
        <div class="vi-text">Warning point</div>
    </div>
</div>


<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
    <div class="verdict2-pro">
        <div class="verdict2-card-head">
            <div class="verdict2-icon pro">✓</div>
            <strong>Pros</strong>
        </div>
        <ul class="verdict2-ul">
            <li>Advantage</li>
        </ul>
        <p class="verdict2-advice">Advice text.</p>
    </div>
    <div class="verdict2-con">
        <div class="verdict2-card-head">
            <div class="verdict2-icon con">!</div>
            <strong>Cons</strong>
        </div>
        <ul class="verdict2-ul">
            <li>Limitation</li>
        </ul>
        <p class="verdict2-advice">Context for the limitation.</p>
    </div>
</div>

<div class="k1">
    <div class="k1-head">
        <div class="k1-ico"><svg ...info icon.../></div>
        <span class="k1-label">Key fact</span>
    </div>
    <p class="k1-title">Title</p>
    <p class="k1-body">Body text.</p>
    <!-- Optional bullet list -->
    <ul class="k1-list">
        <li>Point</li>
    </ul>
</div>


<div class="k2">
    <div class="k2-head">
        <div class="k2-head-left">
            <span class="k2-pill">Overview</span>
            <p class="k2-title">Title</p>
        </div>
    </div>
    <div class="k2-stats">
        <div class="k2-stat"><div class="k2-stat-num">4</div><div class="k2-stat-label">Label</div></div>
        <div class="k2-stat"><div class="k2-stat-num">99%</div><div class="k2-stat-label">Label</div></div>
        <div class="k2-stat"><div class="k2-stat-num">~8€</div><div class="k2-stat-label">Label</div></div>
    </div>
    <p class="k2-foot">Footer text.</p>
</div>


<div class="k3">
    <div class="k3-head">
        <span class="k3-head-tag">Checklist</span>
        <p class="k3-head-title">Title</p>
    </div>
    <div class="k3-body">
        <ol class="k3-list">
            <li>Step or point</li>
        </ol>
    </div>
</div>

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
    <div class="fact-card">
        <div class="fact-val">83%</div>
        <div class="fact-lbl">Fibre coverage</div>
    </div>
    <!-- repeat ... -->
</div>

<div class="cc-pair">
    
    <div class="ccard primary">
        <div class="ccard-kicker">
            <svg ...phone icon.../> English advisors
        </div>
        <a href="/telecom/selection/fr-ti-cc-enselectra?referer=https%3A%2F%2Fen.selectra.info%2Fbroadband-phone-france%2Fdesign-system" class="ccard-num">+33 9 77 55 72 27</a>
        <p class="ccard-pricing">Free service</p>
        <p class="ccard-meta">Description.</p>
        <div class="ccard-hours">
            <span class="day">Mon–Fri</span><span class="open">8am–9pm</span>
            <span class="day">Saturday</span><span class="open">9am–7pm</span>
            <span class="day">Sunday</span><span class="open">9am–5pm</span>
        </div>
        <a href="/telecom/selection/fr-ti-cc-enselectra?referer=https%3A%2F%2Fen.selectra.info%2Fbroadband-phone-france%2Fdesign-system" class="ccard-cta">Call now</a>
    </div>
    
    <div class="ccard">
        ...
        <a href="#" class="ccard-cta">Action →</a>
    </div>
</div>


<div class="cc-pair single">
    <div class="ccard primary">...</div>
</div>

<div class="qn-grid">
    <a href="/section" class="qn-card">
        <div class="qn-bar" style="background:var(--accent);"></div>
        <div class="qn-inner">
            <span class="qn-tag" style="color:var(--accent-ink);">📡 Internet</span>
            <p class="qn-title">Card title</p>
            <p class="qn-sub">Short description.</p>
            <span class="qn-cta" style="background:color-mix(in oklab,var(--accent) 12%,white);color:var(--accent-ink);">
                Explore →
            </span>
        </div>
    </a>
</div>

<div class="bar-row">
    <div class="bar">
        <span style="width:75%;"></span> 
    </div>
    <span class="num">75%</span>
</div>

<ul class="vlist">
    <li>
        <span class="vi">
            <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
        Item text with <strong>emphasis</strong>.
    </li>
</ul>

<a href="/target-page" class="link-chip">
    Link text
    <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M7 17L17 7M7 7h10v10"/>
    </svg>
</a>

<span class="price price-big">29,99€<span class="per">/month</span></span>


<p class="cmp-price">34,99€ <span class="per">/mo</span></p>

<x-offers.horizontal-cards techFilter="2_2" providerFilter="orange,sfr,bouygues,free" :count="4" />


<x-offers.horizontal-cards techFilter="3_1" :count="4" />


<x-offers.horizontal-cards offerType="mobile" :noEngagement="true" :count="4" />


<x-offers.horizontal-cards offerType="mobile" providerFilter="red,sosh,bouygues,free" :count="4" />

<x-offers.horizontal-cards-full techFilter="2_2" providerFilter="orange,sfr,bouygues,free" :count="4" />


<x-offers.horizontal-cards-full techFilter="3_1" :count="4" />


<x-offers.horizontal-cards-full offerType="mobile" :noEngagement="true" :count="4" />


<x-offers.horizontal-cards-full offerType="mobile" providerFilter="red,sosh,bouygues,free" :count="4" />

<x-widget::telecom-box tech="2_2" rows="6" sort="price" />


<x-widget::telecom-box tech="2_1,2_2" providers="orange" rows="8" minSpeed="20" sort="price" />


<x-widget::telecom-box tech="3_1" providers="orange,sfr,bouygues,free" rows="6" sort="price" />

<x-widget::telecom-forfait providers="free,orange,bouygues,sfr" network="5,7" minDataGo="10" durations="0" rows="10" sort="price" />


<x-widget::telecom-forfait providers="red,coriolis,sosh,prixtel" network="5,7" durations="0" rows="10" sort="price" />

<x-tools.eligibility-widget-v2 />

<x-bpf-broadband-recommender />

<x-tools.speed-test />

<x-tools.signalement-panne />


<x-tools.signalement-panne provider="orange" network="mobile" />

<x-tools.composition-pack-box-mobile />


<x-tools.composition-pack-box-mobile provider="bouygues" :maxMobile="4" />

<x-tv.liste-chaines providers="orange" :themeId="15" />


<x-tv.liste-chaines providers="free" :themeId="4" />


<x-tv.liste-chaines providers="bouygues" nameFilter="4k" />


<x-tv.liste-chaines providers="sfr,orange,free" :themeId="8" nameFilter="sport" />

<x-tv.bouquet :packageId="25" :providerId="14" />

<div class="adv-banner">
    <div>
        <p class="adv-banner__kicker">
            <span class="cta-dot"></span>
            English-speaking advisors available now
        </p>
        <p class="adv-banner__headline">Not sure which plan is right for you?</p>
        <p class="adv-banner__desc">We compare every provider at your address and handle the sign-up — all in English, all free.</p>
    </div>
    <div class="adv-banner__actions">
        <a href="/telecom/selection/fr-ti-cc-enselectra?referer=https%3A%2F%2Fen.selectra.info%2Fbroadband-phone-france%2Fdesign-system" class="adv-banner__phone-btn">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg>
            +33&nbsp;9&nbsp;77&nbsp;55&nbsp;72&nbsp;27
        </a>
        <span class="adv-banner__caption">Free service · Mon–Sat 9am–8pm</span>
    </div>
</div>


<div class="adv-banner">
    <div class="flex items-center gap-4">
        <img src="https://images.selectra.info/articles/fr-tc-assets/logos/logo-{slug}-100-ct.webp"
             alt="{Provider}" width="64" height="38" loading="lazy" class="shrink-0">
        <div>
            <p class="adv-banner__kicker"><span class="cta-dot"></span> ...</p>
            <p class="adv-banner__headline">...</p>
            <p class="adv-banner__desc">...</p>
        </div>
    </div>
    <div class="adv-banner__actions">...</div>
</div>


<div class="adv-banner adv-banner--compact">
    <div>
        <p class="adv-banner__kicker"><span class="cta-dot"></span> Free service</p>
        <p class="adv-banner__headline">Need help choosing a plan?</p>
    </div>
    <div class="adv-banner__actions">
        <button type="button"
            @click="window.dispatchEvent(new CustomEvent('open-callback-modal', { detail: { leadSource: 'fr-ti-cc-enselectra' } }))"
            class="adv-banner__call-btn">
            <svg ...phone icon.../> Call now — free
        </button>
        <a href="/broadband-phone-france" class="adv-banner__link-btn">
            Compare online →
        </a>
    </div>
</div>

<x-broadband-phone-france.block />   

<x-broadband-phone-france.block placement="end" />

<x-broadband-phone-france.cta provider="sfr" skin="light" />

<x-broadband-phone-france.cta provider="orange" skin="light" size="sm" :show-mention="false" />

<x-pros-cons
    :pros="[
        '<strong>Largest 4G/5G network</strong> in France — 99% population coverage.',
        'Competitive triple-play bundles including TV and mobile.',
        'No-commitment mobile plans available from €9.99/month.',
    ]"
    :cons="[
        'Pricier than discount brands like Free or SFR.',
        'Customer service can be slow during peak periods.',
    ]"
/>

<x-essentials-block title="Bouygues Telecom at a glance" :items="[
    '<strong>4G/5G network</strong> covering 99% of the French population.',
    'Plans start from <strong>€9.99/month</strong> on a no-commitment basis.',
    'MVNOs such as La Poste Mobile and NRJ Mobile use its infrastructure.',
    'Reliable customer service rated above industry average on Trustpilot.',
]" />

<x-shared.feature-cards :cols="3" :items="[
    ['emoji' => '📡', 'title' => 'Network coverage',
     'html'  => '4G/5G reaching <strong>99% of the population</strong>.',
     'tone'  => 'blue'],
    ['emoji' => '💸', 'title' => 'Competitive pricing',
     'html'  => 'Triple-play from <strong>€27.99/month</strong>.',
     'tone'  => 'emerald'],
    ['emoji' => '📺', 'title' => 'TV included',
     'html'  => 'Over 160 live channels included in most plans.',
     'badge' => '160+ channels', 'tone' => 'violet'],
]" />

<x-providers.plan-spotlight :plans="[
    [
        'number'      => '01',
        'type'        => 'BBOX',           
        'subtype'     => 'FIBRE · ENTRY',  
        'name'        => 'Bbox Fit',
        'tagline'     => 'One-line description shown below the header.',
        'price'       => '26.99€',         
        'price_full'  => '37.99€',         
        'promo_label' => 'First 12 months',
        'commitment'  => '12-month commitment',
        'score'       => 'C',              
        'features'    => ['Up to <strong>400 Mbit/s</strong>', 'Wi-Fi 6 included'],
        'limitations' => ['No TV decoder'],   
        'cta_url'     => '/telecom/selection/bouygues-telecom/box',
        'cta_label'   => 'See Bbox Fit',
    ],
]" />

<x-monetisation.top-offres
    title="🏆 Best mobile plans right now"
    description="Ranked by data-per-euro value."
    profile="rapport_data_prix_score_provider"   
    :count="3"
/>


<x-monetisation.top-offres compact :count="2" title="🏆 Top MVNO plans" />

<x-providers.offer-preview-cards :cards="[
    [
        'tone'       => 'orange',   
        'icon'       => 'wifi',     
        'label'      => 'Fibre & Bbox',
        'sublabel'   => 'Home broadband · with or without TV',
        'price_from' => 'From €26.99',
        'price_unit' => '/month',
        'features'   => ['Up to <strong>8 Gbit/s</strong> fibre', 'Nº1 WiFi quality'],
        'href'       => '/broadband-phone-france/providers/bouygues-telecom/bbox',
        'cta_label'  => 'See Bbox plans',   
    ],
    
]" />

<x-providers.editorial-verdict
    score="A"                    
    scoreLabel="Excellent choice"
    :plansGraded="['A' => 2, 'B' => 2, 'D' => 1]"
    :plansTotal="5"
    badge="🏆 Award text"        
    headline="Editorial headline"
    editorial="Editorial paragraph..."
    :loves="[
        'What we love item 1.',
        'What we love item 2.',
    ]"
    :keepInMind="[
        'Caveat item 1.',
    ]"
/>

<x-bpf-esim-checker />

<x-french-dialer
    section-class="py-10 md:py-14 bg-gray-50"
    heading="French phone number converter"
    card1-label="International format (+33)"
    card1-mode="intl"      
    card2-label="Local format (in France)"
    card2-mode="local"
/>

<x-reviews.review-form-generic lang="en" />


<x-reviews.review-form-generic lang="en" :providers="[
    ['slug' => 'orange', 'name' => 'Orange'],
    ['slug' => 'free',   'name' => 'Free'],
]" />