Internal reference · en.selectra.info/energy-france
Design System
Custom UI components built for energy-france pages. All patterns below are used on switch-supplier and suppliers/_provider.
Dark hero section
Navy background with two radial glows (violet top-right, blue bottom-left). Used on all energy-france article pages. Glows are injected via JS so they don't affect the DOM when JS is off.
Blade code
<style>
section.bg-navy { position: relative; }
.hero-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-glow-v { top: -180px; right: -60px; width: 560px; height: 560px;
background: radial-gradient(circle, color-mix(in srgb, var(--accent-vivid) 22%, transparent) 0%, transparent 65%); }
.hero-glow-b { bottom: -160px; left: -80px; width: 480px; height: 480px;
background: radial-gradient(circle, rgba(37,99,235,.16) 0%, transparent 65%); }
section.bg-navy h1 { color: #fff; }
section.bg-navy h1 .hero-accent { color: var(--accent-vivid); font-style: italic; font-weight: 700; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var h1 = document.querySelector('section.bg-navy h1');
if (h1) h1.innerHTML = h1.textContent.replace('France',
'<em class="hero-accent">France</em>');
var hero = document.querySelector('section.bg-navy');
if (hero) {
['hero-glow hero-glow-v', 'hero-glow hero-glow-b'].forEach(function (cls) {
var el = document.createElement('span');
el.className = cls;
hero.prepend(el);
});
}
});
</script>Stats row .hero-stats
Key numbers displayed in the hero, below the lead paragraph. Used via x-slot:afterLead.
Blade code
<x-slot:afterLead>
<div class="hero-stats">
<div>
<div class="hero-stat__num">€0</div>
<div class="hero-stat__label">To switch supplier</div>
</div>
<div>
<div class="hero-stat__num"><10 min</div>
<div class="hero-stat__label">To sign up</div>
</div>
</div>
</x-slot:afterLead>CTA panel .hero-panel
Glass panel placed in the hero right column via x-slot:heroRight. Shows the Selectra phone CTA with advisor availability dot.
We compare all offers and handle your subscription — free, in English.
+33 9 87 67 37 93 Call now · free service →● Available now · Mon–Fri 8am–9pm
Blade code
<x-slot:heroRight>
<div class="hero-panel">
<div class="hero-panel__advisors">
<span class="cta-dot" style="display:inline-block;width:10px;height:10px;background:#22c55e;"></span>
<span style="color:rgba(255,255,255,.75);">English-speaking advisors</span>
</div>
<p class="hero-panel__copy">Call text here.</p>
<a href="/energie/selection/fr-ei-cc-enselectra" class="hero-panel__cta-btn"
style="display:flex;flex-direction:column;align-items:center;gap:4px;">
<span class="hero-panel__phone">+33 9 87 67 37 93</span>
<span style="font-size:13px;font-weight:600;opacity:.85;">Call now · free service →</span>
</a>
<p class="hero-panel__hours">Mon–Fri 8am–9pm · Sat 8.30am–6.30pm · Sun 9am–6pm</p>
<div class="hero-panel__social">
<div class="hero-panel__avatars">
<div class="hero-panel__avatar" style="background:var(--toc-active);">A</div>
<div class="hero-panel__avatar" style="background:#2563EB;">M</div>
</div>
<span class="hero-panel__social-text">Helping 200+ expats every month</span>
</div>
</div>
</x-slot:heroRight>Verdict checklist .verdict-card
Single-column list of reasons to choose or skip a provider. Left border color matches the provider's brand color via --brand CSS variable.
Blade code
<div class="verdict-card">
<div class="verdict-item">
<div class="vi-dot good">✓</div>
<div class="vi-text">Reason to choose — <strong>key fact</strong>.</div>
</div>
<div class="verdict-item">
<div class="vi-dot warn">!</div>
<div class="vi-text">Reason to skip — <strong>key fact</strong>.</div>
</div>
</div>Pros / cons cards .verdict2-pro / .verdict2-con
Two-column pros and cons layout. Green top border for pros, amber for cons. Each card ends with a contextual advice callout.
- Nationwide coverage in mainland France.
- Competitive fixed-price offers available.
- Green electricity option included.
- Customer support is in French only.
- No online account management in English.
Blade code
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
<div class="verdict2-pro">
<div class="verdict2-card-head">
<div class="verdict2-icon pro">✓</div>
<strong>Choose if</strong>
</div>
<ul class="verdict2-ul">
<li>Reason 1.</li>
<li>Reason 2.</li>
</ul>
<div class="verdict2-advice">Summary advice.</div>
</div>
<div class="verdict2-con">
<div class="verdict2-card-head">
<div class="verdict2-icon con">!</div>
<strong>Skip if</strong>
</div>
<ul class="verdict2-ul">
<li>Reason 1.</li>
</ul>
<div class="verdict2-advice">Summary advice.</div>
</div>
</div>Subscribe steps .step-row
Vertical timeline steps. Used on provider pages for the "how to subscribe" / "how to set up" sections. Step square color inherits --accent (energy vertical = violet).
Blade code
<div>
<div class="step-row">
<span class="step-num">1</span>
<div>
<div class="step-title">Step title</div>
<div class="step-desc">Step description.</div>
</div>
</div>
</div>Large steps .sb-step
Editorial step block with large oversized number. Used on switch-supplier for the main how-to guide. More visual weight than .step-row.
Blade code
<div class="sb-steps">
<div class="sb-step">
<div class="sb-step-num"><span class="zero">0</span>1</div>
<div>
<div class="sb-step-title">Step title</div>
<div class="sb-step-body">Step description with <strong>emphasis</strong>.</div>
</div>
</div>
</div>Contact cards .ccard
Two-card grid: provider's French number (secondary) + Selectra's English service (primary, .primary modifier — accent rail, gradient tint, CTA button). Selectra is the primary conversion for English-speaking expats.
Blade code
<div class="cc-pair">
<div class="ccard">
<div class="ccard-kicker">[Provider] customer service</div>
<a class="ccard-num" href="tel:XXXX">XXXX</a>
<div class="ccard-pricing">French-speaking line</div>
<p class="ccard-meta">For account & billing questions. For English help, use Selectra's free service.</p>
</div>
<div class="ccard primary">
<div class="ccard-kicker">Free English-speaking service</div>
<a class="ccard-num" href="/energie/selection/fr-ei-cc-enselectra">+33 9 87 67 37 93</a>
<div class="ccard-pricing">Free service · no booking · avg wait 2 min</div>
<p class="ccard-meta">A <strong>Selectra advisor</strong> compares all offers, sets up your contract in English, and stays on the line until everything is signed.</p>
<div class="ccard-hours">
<span class="day">Mon–Fri</span><span class="open">8:00 – 21:00</span>
<span class="day">Saturday</span><span class="open">9:00 – 19:00</span>
<span class="day">Sunday</span><span class="open">9:00 – 17:00</span>
</div>
<a class="ccard-cta" href="/energie/selection/fr-ei-cc-enselectra">Call now in English</a>
</div>
</div>Key facts .fact-card
Stat cards in a 2–4 column grid. White background, accent gradient top bar, dark value, uppercase label. Section heading: [Provider] in numbers. Subtitle: Key figures about [Provider].
EDF in numbers
Key figures about EDF.
Blade code
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
@foreach($facts as $fact)
<div class="fact-card">
<div class="fact-val">{{ $fact['value'] }}</div>
<div class="fact-lbl">{{ $fact['label'] }}</div>
</div>
@endforeach
</div>Selectra partner badge .sp-badge
Shown on provider pages where comparator-phone-number is present in providerKeyValues — indicates Selectra is an official partner and can handle the subscription. Uses the Selectra S-mark icon.
Blade code
<span class="sp-badge">
<svg viewBox="0 0 51.3 57.2" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.2 46.2c-4 7-13.1 6.9-18 .2L6.4 30.1c3-3.5 10.5-6.4 13.5-2.4 5.1 7 5.6 7.2 6.6 5.9 3.1-5.1 14.5-26 14.6-26.2H7.3c-3.5 0-7.4 3.7-7.3 8v33.5c0 3.5 3.4 8 7.5 8H44c4.1 0 7.4-3.6 7.3-7.5l.1-33.3c-6.9 12.3-16.2 30.1-16.2 30.1"/>
</svg>
Selectra partner
</span>Pricing tabs .price-tab
Underline-style tabs for switching between pricing options (Base / HP-HC / Tempo). Pair with Alpine.js x-data to show/hide content panels.
Active tab content shown here.
Blade code
<div x-data="{ tab: 'base' }">
<div style="border-bottom:1px solid #e5e7eb; display:flex;">
<button class="price-tab" :class="{ 'is-active': tab === 'base' }"
@click="tab = 'base'">Base rate</button>
<button class="price-tab" :class="{ 'is-active': tab === 'hphc' }"
@click="tab = 'hphc'">HP / HC</button>
</div>
<div x-show="tab === 'base'">
<x-widget::grille-tarifaire :offerId="7" option="base" />
</div>
<div x-show="tab === 'hphc'">
<x-widget::grille-tarifaire :offerId="7" option="hphc" />
</div>
</div>Energy switcher .switcher
Toggle between electricity and gas views. Used on switch-supplier to show different comparators. Active button gets a purple underline shadow.
Blade code
<div x-data="{ energy: 'electricity' }" >
<div class="switcher">
<button class="sw-btn" :class="{ 'sw-active': energy === 'electricity' }"
@click="energy = 'electricity'">
<!-- lightning SVG --> Electricity
</button>
<button class="sw-btn" :class="{ 'sw-active': energy === 'gas' }"
@click="energy = 'gas'">
<!-- flame SVG --> Gas
</button>
</div>
<div x-show="energy === 'electricity'">
<x-widget::top-offres type="electricity" :rows="5" />
</div>
<div x-show="energy === 'gas'">
<x-widget::top-offres type="gas" :rows="5" />
</div>
</div>.faq-list .faq-item / .faq-q / .faq-a
Animated accordion FAQ. One .faq-item per question — JS toggles .faq-open on click. The answer panel expands via CSS grid transition.
Yes — there are no nationality requirements to switch energy suppliers in France. You need a valid address, a PDL or PCE meter reference, and a French bank account (RIB) for direct debit.
Selectra advisors can handle the entire process in English, free of charge.
No. Switching suppliers in France never interrupts supply. The process takes 2–3 weeks and is handled automatically between suppliers.
Typically 2–3 weeks from signature. You do not need to contact your current supplier — the new one handles everything.
Blade code
<div class="faq-list">
<div class="faq-item">
<button class="faq-q" type="button">
<span class="faq-q-txt">Question text</span>
<span class="faq-icon">
<svg viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</button>
<div class="faq-a-wrap">
<div class="faq-a-inner">
<div class="faq-ans">
<p>Answer content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- JS toggle (place in headExtra or before </body>) -->
<script>
document.querySelectorAll('.faq-q').forEach(function (btn) {
btn.addEventListener('click', function () {
btn.closest('.faq-item').classList.toggle('faq-open');
});
});
</script><x-slot:headExtra> or before </body>.Bullet list .vlist
Semantic <ul> where each item gets a 22 px violet-soft pill with a 14 px SVG icon inside. Five markers available via inline SVG sprite — pick by meaning. The pill adapts to the page vertical's accent color.
Marker gallery
Why switch your gas supplier?
- It's free. No fee from any side, ever.
- No service interruption. Same gas, same pipes — only the billing entity changes.
- Reversible. Switch back to the regulated tariff at any time.
What you don't have to do
- No paperwork beyond your IBAN and meter ID.
- No call to your old supplier — fully handled by the new one.
- No technician visit. Same meter stays in place.
How a switch unfolds
- You sign online — about 5 minutes with your IBAN and meter ID.
- The new supplier contacts the old one — no action from you.
- The effective date is set — usually 5–15 days later.
Blade code
<ul class="vlist"> <li><span class="vi"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></span><strong>It's free.</strong> No fee from any side, ever.</li> <li><span class="vi"><svg viewBox="0 0 24 24"><path d="M5 12h14"/></svg></span><strong>No paperwork</strong> beyond your IBAN and meter ID.</li> <li><span class="vi"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><strong>Sign online</strong> in 5 minutes.</li> </ul> <!-- Marker paths: check d="M5 13l4 4L19 7" plus d="M12 5v14M5 12h14" minus d="M5 12h14" cross d="M6 6l12 12M18 6L6 18" arrow-right d="M5 12h14M13 6l6 6-6 6" -->
Key takeaway .k1
Left-border callout with an icon badge, uppercase label, heading, prose summary, and an optional bullet list. Use to surface the single most important fact before a long section. The title tag is flexible: use <p> when the K1 is the only callout in a section (avoids an isolated Hx), <h3> when two or more H3s exist in the section, or <h4> inside an already H3-divided section.
Blade code
<aside class="k1" aria-labelledby="k1-title">
<div class="k1-head">
<div class="k1-ico">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16v.01"/></svg>
</div>
<div class="k1-label">Key takeaway</div>
</div>
<p id="k1-title" class="k1-title">Heading</p>
<p class="k1-body">Summary paragraph with <strong>key facts</strong>.</p>
<ul class="k1-list">
<li><strong>Point 1</strong> — explanation.</li>
<li><strong>Point 2</strong> — explanation.</li>
</ul>
</aside>Stats summary .k2
Gradient card with a pill label, a 3-column stat strip, and a footer sentence. Use near the top of an article to give readers the numbers before they dive in.
Blade code
<aside class="k2" aria-labelledby="k2-title">
<div class="k2-head">
<div class="k2-head-left">
<span class="k2-pill">In short</span>
<h3 id="k2-title" class="k2-title">Topic · the essentials</h3>
</div>
</div>
<div class="k2-stats">
<div class="k2-stat">
<div class="k2-stat-num">€0</div>
<div class="k2-stat-label">Stat label</div>
</div>
<div class="k2-stat">
<div class="k2-stat-num">X days</div>
<div class="k2-stat-label">Stat label</div>
</div>
<div class="k2-stat">
<div class="k2-stat-num">€100–250</div>
<div class="k2-stat-label">Stat label</div>
</div>
</div>
<p class="k2-foot">Summary sentence with <strong>key call to action</strong>.</p>
</aside>TL;DR steps .k3
Dark navy header with a pill tag, followed by a numbered list where each counter is auto-generated by CSS. Use to summarise the N things readers must know before acting.
Blade code
<aside class="k3" aria-labelledby="k3-title">
<div class="k3-head">
<span class="k3-head-tag">TL;DR</span>
<h3 id="k3-title" class="k3-head-title">The N things to know</h3>
</div>
<div class="k3-body">
<ol class="k3-list">
<li><strong>Point 1.</strong> Explanation.</li>
<li><strong>Point 2.</strong> Explanation.</li>
<li><strong>Point 3.</strong> Explanation.</li>
</ol>
</div>
</aside>Index card .v3
Stacked-card aesthetic with a tape decoration and a heading. The paper-stack shadow is generated by CSS pseudo-elements — no extra markup needed. Good for a named mini-glossary of 3–6 terms.
- Facture d'électricité → Electricity bill
- Numéro PDL → Meter point reference (PDL)
- TURPE → Grid access tariff (TURPE)
- Mise en service → Connection activation
Blade code
<div class="v3-wrap">
<div class="v3-inner">
<div class="v3-tape"></div>
<div class="v3-head">Key electricity bill terms</div>
<ul class="v3-list">
<li class="v3-row">
<span class="v3-fr">Facture d'électricité</span>
<span class="v3-arr">→</span>
<span class="v3-en">Electricity bill</span>
</li>
<!-- repeat .v3-row for each term -->
</ul>
</div>
</div>Editorial table .tbl-edit
Default for informational tables (glossaries, tax breakdowns, two- or three-column data). Clean, neutral, scannable. No row flagging.
| Profile | Typical use | Annual consumption | PRG kWh price |
|---|---|---|---|
| Base | Cooking only | < 1,000 kWh/yr | €0.1432/kWh |
| B0 | Cooking + hot water | 1,000–6,000 kWh/yr | €0.1325/kWh |
| B1 | Heating (individual boiler) | 6,000–30,000 kWh/yr | €0.1051/kWh |
Blade code
<div class="tbl-edit">
<table>
<thead>
<tr>
<th scope="col">Col A</th>
<th scope="col">Col B</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="profile">Label</th>
<td>Description</td>
<td class="price">€0.0000<span class="unit">/kWh</span></td>
</tr>
</tbody>
</table>
</div>Editorial + flag .tbl-flag / tr.best
Use when readers benefit from knowing which row stands out. Violet left rail + tinted background on tr.best. Add .badge inside the profile cell.
| Profile | Typical use | Annual consumption | PRG kWh price |
|---|---|---|---|
| Base | Cooking only | < 1,000 kWh/yr | €0.1432/kWh |
| B0 | Cooking + hot water | 1,000–6,000 kWh/yr | €0.1325/kWh |
| B1 Lowest €/kWh | Heating (individual boiler) | 6,000–30,000 kWh/yr | €0.1051/kWh |
| B2i | Collective / shared heating | > 30,000 kWh/yr | ≈€0.1051/kWh |
Blade code
<div class="tbl-flag">
<table>
<thead><tr>
<th scope="col">Profile</th>
<th scope="col">Typical use</th>
<th scope="col">Annual consumption</th>
<th scope="col">Price</th>
</tr></thead>
<tbody>
<tr class="best">
<th scope="row">
<span class="profile">Label <span class="badge">Best</span></span>
</th>
<td>Description</td>
<td class="conso">Range</td>
<td class="price">€0.0000<span class="unit">/kWh</span></td>
</tr>
</tbody>
</table>
</div>Hybrid semantic .tbl-hybrid
Real <table> with <th scope> and <caption> for Google table snippets. Each row renders as a mini-fiche: large profile code, labelled use, consumption scale bar, hero price. Use on dedicated price pages where this table is the centrepiece.
| Profile | Typical use | Annual consumption | PRG kWh price |
|---|---|---|---|
| Base | Typical use Cooking only |
Annual consumption < 1,000 kWh |
PRG kWh price €0.1432 per kWh, incl. tax |
| B0 | Typical use Cooking + hot water |
Annual consumption 1,000–6,000 kWh |
PRG kWh price €0.1325 per kWh, incl. tax |
| B1 | Typical use Heating (individual boiler) |
Annual consumption 6,000–30,000 kWh |
PRG kWh price €0.1051 per kWh, incl. tax |
| B2i | Typical use Collective / shared heating |
Annual consumption > 30,000 kWh |
PRG kWh price ≈€0.1051 per kWh, incl. tax |
Blade code
<div class="tbl-hybrid">
<table>
<caption>Table title<strong>Subtitle / source</strong></caption>
<thead><tr><th scope="col">Profile</th><th scope="col">Use</th><th scope="col">Consumption</th><th scope="col">Price</th></tr></thead>
<tbody>
<tr>
<th scope="row"><span class="profile-chip"><span class="code">B1</span></span></th>
<td class="use-cell">
<div class="use-label">Typical use</div>
<div class="use-text">Heating (individual boiler)</div>
</td>
<td class="conso-cell">
<div class="conso-label">Annual consumption</div>
<div class="conso-value">6,000–30,000 kWh</div>
<div class="conso-track"><div class="conso-fill" style="left:20%;width:80%;"></div></div>
</td>
<td class="price-cell">
<div class="price-label">PRG kWh price</div>
<div class="price-value">{{ $fmtKwhNum($prvgKwhB1) }}</div>
<div class="price-unit">per kWh, incl. tax</div>
</td>
</tr>
</tbody>
</table>
</div>.conso-fill.off-scale).