Design System — Moving to France

Color tokens

All colors are defined as CSS custom properties. Brand and ink tokens apply site-wide; vertical accent tokens are scoped per section via data-vertical="moving" or .vertical-moving-to-france.

Brand palette

--accent (moving)
#1D9E75

--accent-ink
#0F6F50

--color-primary
#015AA3

--color-navy
#0b1932

success
#16a34a

--color-error
#d0021b

Ink (text) system

--ink
#0F1A36

--ink-soft
#2A3652

--ink-muted
#6B7A9A

--rule
#E5EAF2

--rule-soft
#EEF1F7

--danger
#C0455B

Surface / background

#E6F7F3
accent tint (toc-active-bg)

#F5F7FB
TOC / card BG

#FFFFFF
card BG

Typography

Two font families via Fontshare. Satoshi is the body font (400/500/700/900). Expose is the heading/display font (500/700/800) — used for H1–H3 and figures. On the Moving vertical the site-wide H1 inherits the teal accent.

H1 — Expose 800 · moving H1 uses the teal accent Moving to France: the complete guide

H2 — Expose 800, 28–34px, --ink Opening a bank account as a newcomer

H3 — Expose 700, 20–22px, --ink What documents do you need?

Body — Satoshi 400, 18px / 1.75 After arriving on a long-stay visa, you have 3 months to validate it online and pay the residence tax. Sort your tax number and bank account early — almost every other formality depends on them.

List item — Satoshi 400, 16px / 1.7 EU and EEA citizens can live and work in France without a visa or residence permit.

Label / kicker — Expose or Satoshi 700–800, uppercase

Good to know Week 1 · Step label internal reference

Vertical accent system

Each section of en.selectra.info overrides --accent and --accent-ink. Apply via data-vertical="X" on a wrapper or .vertical-X class. All accent-based components (callouts, lists, tables, chips…) pick up the color automatically — this whole page is wrapped in data-vertical="moving".

Moving to France · this vertical

data-vertical="moving" · --accent: #1D9E75 · --accent-ink: #0F6F50

Broadband & Phone France

data-vertical="broadband" · --accent: #FA7C30 · --accent-ink: #B0531A

Energy France

data-vertical="energy" · --accent: #a78bfa · --accent-ink: #5B3FC9

Banking France

data-vertical="banking" · --accent: #EF9F27 · --accent-ink: #A76A10

Insurance

data-vertical="insurance" · --accent: #D4537E · --accent-ink: #983D5D

Blade code

{{-- Wrap any block in the moving scope --}}
<div data-vertical="moving">
    <div class="tb">...</div>   {{-- picks up teal accent --}}
    <div class="is-filled">...</div>
</div>

{{-- Or use the class --}}
<div class="vertical-moving-to-france">
    <div class="tb">...</div>   {{-- picks up teal accent --}}
</div>

{{-- Inline override (if needed) --}}
<div style="--accent:#1D9E75; --accent-ink:#0F6F50;">
    ...
</div>

Section spacing <section class="py-4 md:py-6">

The vertical rhythm between article blocks is not set by the layout or by this design system — it is driven by the py-X utility authored on each <section>. A single base-theme rule (.article-body section + section { padding-top: revert-layer }) makes that py-X symmetric, so it controls both the top and bottom padding of every block. The visible gap between two sections therefore equals twice the authored py value.

Rule: every content <section> on Moving to France uses py-4 md:py-6 — the same tight rhythm as Broadband & Phone France. Never use LFO-style py-10 / py-14: it roughly doubles the gap and reads as "too airy". Colored sections (bg-gray-50, tinted blocks) take the same symmetric py-4 md:py-6 — no special handling.

Gap between two adjacent sections
Authored on the section	Mobile gap	Desktop gap	Verdict
`py-4 md:py-6`	32px	48px	✓ Use this
`py-6 md:py-8`	48px	64px	• Only if intentional
`py-10 md:py-14`	80px	112px	✗ Too airy (LFO-style)

Headings carry their own margin: pair sections with <h2 class="… mb-4"> for the title-to-content gap.

Blade code

{{-- Every content section — symmetric py drives top AND bottom --}}
<section class="py-4 md:py-6">
    <div class="article-body-container">
        <h2 class="mb-4">Section title</h2>
        <p>Body…</p>
    </div>
</section>

{{-- Colored section — same py, no override needed --}}
<section class="py-4 md:py-6 bg-gray-50">
    ...
</section>

{{-- ❌ Never — LFO-style, ~2.3× the gap --}}
<section class="py-10 md:py-14">...</section>

In Short block .is-filled

Summary block at the top of an article or section. Left accent bar + tinted background. Use for key takeaways, "at a glance" summaries, or definitions.

In short

Opening a French bank account as a newcomer

You generally need a valid ID, proof of a French address and your residency status. Some online banks accept newcomers before they have a permanent address.

What you need

✓Valid passport or national ID
✓Proof of French address (justificatif de domicile)
✓Visa or residence-permit status

Typical timeline

1Gather your documents
2Apply online or in a branch
3Receive your RIB and card (1–2 weeks)

Blade code

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

Key takeaway cards .k1 / .k2 / .k3

Three variants for emphasising important information mid-article. .k1: simple left-border card. .k2: gradient card with a 3-number stat grid. .k3: dark-header numbered list.

.k1 — left-border highlight

Key fact

You can validate your visa online — no town-hall visit

A long-stay visa (VLS-TS) is validated entirely on the official administration-etrangers-en-france portal. You pay the residence tax there too — there is no need to queue at a préfecture for this step.

.k2 — stats card

Overview

Your first weeks in France

Updated Apr 2026

3 mo

To validate your visa

PUMa

Universal health cover

5 yrs

To long-term residency

The first month is mostly admin: a tax number, a bank account and health registration unlock nearly everything else.

.k3 — dark-header numbered list

Checklist

Your first month in France

Validate your long-stay visa online and pay the residence tax
Open a French bank account and download your RIB
Register with CPAM to start your health cover

Blade code

{{-- k1 — left-border card --}}
<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>
</div>

{{-- k2 — stats card --}}
<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">3 mo</div><div class="k2-stat-label">Label</div></div>
        <div class="k2-stat"><div class="k2-stat-num">PUMa</div><div class="k2-stat-label">Label</div></div>
        <div class="k2-stat"><div class="k2-stat-num">5 yrs</div><div class="k2-stat-label">Label</div></div>
    </div>
    <p class="k2-foot">Footer text.</p>
</div>

{{-- k3 — dark-header numbered list --}}
<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>

Fact cards .fact-card

Compact stat cards with a gradient top bar and a large display number. Use in a grid (2–4 columns) to highlight key metrics at the top of an article or section.

3 mo

To validate a visa

PUMa

Universal healthcare

5 yrs

To permanent residency

27

SEPA / EU countries

Blade code

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
    <div class="fact-card">
        <div class="fact-val">3 mo</div>
        <div class="fact-lbl">To validate a visa</div>
    </div>
    <!-- repeat ... -->
</div>

Text box callout .tb

Highlighted callout for tips, warnings, and important notices. Left accent border + tinted background uses var(--accent). Supports a glyph badge, optional H4, and paragraph body.

💡 Good to know

The RIB — your French bank details

Once your account is open, download your RIB (relevé d'identité bancaire) from your banking app. You'll be asked for it constantly — for your salary, rent, utilities and tax direct debits.

⚠ Heads up

If you arrived on a long-stay visa (VLS-TS), you must validate it online within 3 months of arrival and pay the residence tax — otherwise it becomes invalid and you risk a gap in your legal status.

★ Tip

Request your tax number early

Your numéro fiscal unlocks the impots.gouv.fr portal, which you need for the housing tax and to link many public services. Ask your local tax office (SIP) as soon as you can.

Blade code

{{-- Good to know --}}
<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>

{{-- Warning (no title) --}}
<div class="tb">
    <span class="tb-label"><span class="glyph">⚠</span> Heads up</span>
    <p>Warning text.</p>
</div>

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

Expert quote <x-expert-quote>

Editorial opinion block with author attribution. Use whenever Selectra gives its own take on a process, service or choice — typically at the end of a section. The slot supports HTML (<strong>, links, etc.).

Our editorial take

In our experience, the smoothest first two weeks come down to order: get your tax number and a French bank account before anything else. Almost every later step — renting, health cover, utilities — asks for a RIB or a proof of address, so front-loading these removes most of the friction newcomers run into.

Valentine

Editor at Selectra

Without avatar — falls back to an initial

Our take

Online banks are the fastest route to a RIB if you don't yet have a permanent address — but check they issue a French IBAN, not just an EU one, before you rely on it for rent and taxes.

V

Valentine

Editor at Selectra

Blade code

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

{{-- label defaults to "Our take" if omitted --}}
<x-expert-quote name="Valentine" title="Editor at Selectra">
    Short verdict.
</x-expert-quote>

Verdict cards .verdict-card / .verdict2-pro/.verdict2-con

Two styles: a single-column checklist (.verdict-card) and a split pro/con layout (.verdict2-pro + .verdict2-con). Use to summarise the strengths and trade-offs of a choice — renting furnished vs unfurnished, online vs traditional bank, etc.

Simple checklist — .verdict-card

✓

Furnished rentals come move-in ready — ideal for a first year

✓

Shorter, more flexible 1-year lease (bail meublé)

!

Rent is usually higher than for an equivalent unfurnished flat

Pro/con split — .verdict2-pro + .verdict2-con

✓

Pros

Fast to set up — fully equipped on arrival
Flexible 1-year lease, easy to leave
Utilities often easier to transfer

Best for newcomers settling in for under a year.

!

Cons

Higher monthly rent for the same space
Less choice of long-term family homes

May cost more if you plan to stay several years.

Blade code

{{-- Simple checklist --}}
<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>

{{-- Pro/con split --}}
<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>

Pros & Cons <x-pros-cons>

Two-column grid showing strengths and weaknesses of an option. Accepts a PHP array of HTML strings via :pros and :cons props.

Pros

Fastest route to a RIB — most online banks open an account in days.
No branch appointment needed — fully in English on many apps.
Often accept newcomers before they have a permanent address.

Cons

Some issue an EU IBAN, not a French one — check before relying on it.
Cash deposits and in-person help are limited.

Blade code

<x-pros-cons
    :pros="[
        '<strong>Fastest route to a RIB</strong> — most online banks open an account in days.',
        'No branch appointment needed — fully in English on many apps.',
        'Often accept newcomers before they have a permanent address.',
    ]"
    :cons="[
        'Some issue an EU IBAN, not a French one — check before relying on it.',
        'Cash deposits and in-person help are limited.',
    ]"
/>

Bullet lists .blist

Four marker variants on the same .blist base. Marker color inherits var(--accent). Use .check-b for pros, .cross-b for cons, .num-a for ordered steps, .arrow-b for navigation or highlights.

.check-b

✓EU/EEA citizens — no visa required to settle
✓Free SEPA transfers across the EU
✓Public healthcare after 3 months of residence

.cross-b

✗Many forms are in French only
✗Préfecture appointments can be hard to book
✗Proof of address often needed before anything else

.num-a

1Request your tax number (numéro fiscal)
2Open a French bank account
3Register with CPAM for healthcare

.arrow-b

→Students: register on the campus France / CVEC portal
→Workers: your employer declares you to URSSAF
→Families: enrol children at the town hall

Optional .list-card wrapper adds a white card with a dashed title separator:

Documents for the town hall

✓Passport or national ID
✓Proof of address (justificatif de domicile)
✓Birth certificate, translated if required

Blade code

{{-- Checkmarks (pros) --}}
<ul class="blist check-b">
    <li><span class="marker">✓</span><span>Item with <b>bold</b></span></li>
</ul>

{{-- Crosses (cons) --}}
<ul class="blist cross-b">
    <li><span class="marker">✗</span><span>Limitation</span></li>
</ul>

{{-- Numbered --}}
<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>

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

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

Vlist .vlist

Bullet list with a small accent-tinted icon circle for each item. Cleaner than .blist for short descriptive lists where a check/cross marker isn't needed. SVG icon passed inside .vi.

No French address needed to start a bank application with most online banks.
SEPA transfers are free across the EU, so you can move money in before you arrive.
Selectra can set up your energy and internet for free, in English.

Blade code

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

Badges & chips .chip / Tailwind

Two systems: .chip (accent or ghost variant, controlled size) and inline Tailwind pill badges for one-off labels in content. Use .ynbox for yes/no/partial inside tables.

.chip variants

Visa Carte de séjour Carte Vitale RIB EU/EEA Non-EU Student

Tailwind pill badges (for content)

Passport Long-stay visa Titre de séjour Numéro fiscal Carte Vitale Justificatif Student Worker Urgent

.ynbox (for tables)

✓ ✗ • Yes / No / Partial

Blade code

{{-- .chip --}}
<span class="chip accent">Visa</span>
<span class="chip ghost">EU/EEA</span>

{{-- Tailwind pill (for inline content / tables) --}}
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">Passport</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-purple-100 text-purple-700">Titre de séjour</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Justificatif</span>

{{-- .ynbox (yes/no/partial icons for feature tables) --}}
<span class="ynbox yes">✓</span>
<span class="ynbox no">✗</span>
<span class="ynbox partial">•</span>

Link chips .link-chip

Bold inline link with a diagonal arrow icon. Use inside body text for internal cross-links to other guides. Color inherits --accent-ink.

Once you've arrived, the first thing to handle is your long-stay visa validation . After that, read our guide to registering for healthcare to start your carte Vitale.

Blade code

<a href="/moving-to-france/settling/..." 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>

Link cluster (Read next) .multiple-link

A cluster of 2+ internal links, placed at the end of a section. Use .multiple-link + a .blist.arrow-b list. Never stack individual see-also blocks instead.

Quick nav cards .qn-grid / .qn-card

3-column card grid for section navigation (index pages, hub sub-nav). Each card has a colored top bar (accent), a tag, title, subtitle, and CTA link. Hover effect: lift + shadow.

🏠 Housing

Finding a home

Build a rental dossier, understand leases and avoid the most common pitfalls.

Read guide →

🏥 Healthcare

Carte Vitale

Register with CPAM, get your social security number and your health card.

Read guide →

🚗 Driving

Driving licence

Check whether you can exchange your foreign licence and how to apply.

Read guide →

Blade code

<div class="qn-grid">
    <a href="/moving-to-france/housing" 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);">🏠 Housing</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);">
                Read guide →
            </span>
        </div>
    </a>
</div>

Table of contents .toc

2-column numbered anchor list for long articles. Place at the top of the article body or in x-slot:subnav.

Process steps .ps-timeline

Horizontal numbered timeline for 3–5 steps. Dashed connector line auto-adapts. Mark completed steps with .is-done, the current step with .is-current.

How to register for French healthcare

From arrival to your carte Vitale — typically a few months.

1

Day 1

Gather your proof

ID, proof of address and proof of stable, legal residence in France.

2

Week 1

Apply to CPAM

Submit the health-cover form (S1106) with your supporting documents.

3

Month 1–3

Get your number

CPAM issues your permanent social security number (numéro de sécurité sociale).

4

Month 2–4

Order your card

Request your carte Vitale online and set up your ameli.fr account.

Blade code

<p class="ps-intro-title">Section title</p>
<p class="ps-intro-desc">Short intro.</p>
<div class="ps-timeline"> {{-- grid auto-adapts, up to 5 cols --}}
    <div class="ps-tl-step is-done">    {{-- completed --}}
        <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"> {{-- current --}}
        <div class="ps-tl-node">2</div>
        ...
    </div>
    <div class="ps-tl-step">            {{-- upcoming --}}
        <div class="ps-tl-node">3</div>
        ...
    </div>
</div>

Step rows .step-row

Vertical timeline with a connector line between steps. Each step has a numbered square badge (accent BG) and a title + description. Use for how-to processes and guided procedures.

Always wrap each group of steps in a plain <div> — this ensures :last-child removes the connector line on the final step, even when non-step elements (headings, callouts) follow the group. Always add style="margin-top:0" on .step-title to keep the title vertically aligned with the badge.

1

Check if your licence can be exchanged

EU/EEA licences are valid as-is. Non-EU licences can be exchanged only if your country has a reciprocity agreement with France.

2

Prepare your dossier

Scan your licence, ID, proof of address and a sworn translation if your licence is not in French.

3

Apply on the ANTS portal

Submit your request online within 1 year of becoming resident. You'll get a receipt to drive while it's processed.

Blade code

{{-- Wrap each step group in a plain div so :last-child works correctly --}}
<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>

Big-number steps .sb-steps / .sb-step

Card-based numbered steps with a large display number. Good for longer explanations with sub-bullets. Each card is a grid with a big number on the left and content on the right.

01

Build your rental dossier

1 day

French landlords ask for a complete dossier upfront. Prepare digital copies so you can apply the moment you find a flat.

ID, three latest payslips and your work contract
A guarantor (garant) or a Visale guarantee if you have no French income history

02

Sign the lease & do the inventory

30 min

At signing you'll pay the first month plus a deposit. Complete the état des lieux (inventory) carefully — it protects your deposit when you leave.

Blade code

<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">1 day</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>

Simple table table.t--simple

Clean editorial table with top/bottom ink borders. Last column right-aligned. First column can use <th> for row headers. Wrap in .t-wrap for mobile scroll. An optional <caption> is the table title — it carries built-in vertical padding (16px above, 14px below) so it never sits flush against the .t-wrap card edge or the ink border-top; never zero it out.

Main long-stay visa types
Visa	Who it's for	Renewable	Max duration
VLS-TS "salarié"	Employees with a French contract	Yes	1 year
VLS-TS "étudiant"	University students	Yes	1 year
VLS-TS "visiteur"	Non-working residents with own means	Yes	1 year

Illustrative summary. Always check official requirements.

Blade code

<div class="t-wrap">
    <table class="t t--simple">
        <caption>Optional caption</caption>
        <thead><tr><th>Col</th><th>Duration</th></tr></thead>
        <tbody>
            <tr>
                <th>Row header</th>
                <td class="num">1 year</td> {{-- .num = tabular nums, right-aligned --}}
            </tr>
        </tbody>
    </table>
</div>
<p class="t-foot">Source / footnote.</p>

Table note .tbl-note

Small right-aligned caption placed directly after a table — for source dates, footnote markers, or update notices. Defined in the base theme; requires the .article-body wrapper (automatic in article layouts).

Formality	Where	Typical wait
Visa validation	Online portal	Same day
Carte Vitale	CPAM	1–3 months

*Indicative timings. Updated May 2026.

Blade code

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

Feature matrix table.t--matrix

Dark header row, alternating zebra rows. Use for comparing rights or requirements across categories. Highlight a column with .highlight-col; use .with-accent on a header cell. Combine with .ynbox for yes/no cells.

	EU citizen	Worker (VLS-TS)	Student	Visitor
Right to work	✓	✓	•	✗
Public healthcare (PUMa)	✓	✓	✓	✓
Family reunification	✓	✓	✗	•
Counts toward residency	N/A	✓	•	✓

✓ Yes ✗ No • Conditional

Blade code

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

Progress bar .bar / .bar-row

8px pill bar with accent fill. Use .bar-row for a label + bar + value layout (e.g. cost comparisons, completion scores). Width is set inline via style="width:X%".

Share of income spent on rent — Paris

38%

Share of income spent on rent — Lyon

28%

Share of income spent on rent — Nantes

24%

Illustrative figures.

Blade code

<div class="bar-row">
    <div class="bar">
        <span style="width:38%;"></span> {{-- set width = value % --}}
    </div>
    <span class="num">38%</span>
</div>

Feature cards <x-shared.feature-cards>

Colored icon-card grid for showcasing structured benefits or topic groups. Each card: emoji chip + bold title + HTML body + optional badge pill. 9 tone variants.

🏥

Healthcare

All legal residents get cover via PUMa after 3 months. A top-up mutuelle covers the rest.

🏦

Banking

A French RIB is needed for rent, salary and bills. Online banks are the fastest route.

📄

Admin

Your tax number and residence permit unlock most public services and portals.

Start here

Blade code

<x-shared.feature-cards :cols="3" :items="[
    ['emoji' => '🏥', 'title' => 'Healthcare',
     'html'  => 'Cover via <strong>PUMa</strong> after 3 months.',
     'tone'  => 'blue'],
    ['emoji' => '🏦', 'title' => 'Banking',
     'html'  => 'A French <strong>RIB</strong> is needed for rent and bills.',
     'tone'  => 'emerald'],
    ['emoji' => '📄', 'title' => 'Admin',
     'html'  => 'Your <strong>tax number</strong> unlocks public services.',
     'badge' => 'Start here', 'tone' => 'violet'],
]" />

{{-- Tones: blue | violet | emerald | amber | orange | sky | rose | red | gray --}}

Contact cards .ccard / .cc-pair

Advisor / contact block, useful at the end of a guide. .cc-pair creates a 2-column grid. The primary card (.ccard.primary) has an accent left stripe, gradient top, and a colored phone number. On Moving to France, the natural CTA is setting up home utilities (energy & internet) — not a telecom offer.

English advisors

+33 9 77 55 72 27

Free service — no subscription required

Our English-speaking team sets up your electricity, gas and internet at your new French address, so everything works on move-in day.

Mon–Fri8am–9pm Saturday9am–7pm Sunday9am–5pm

Call now

Read first

Set up utilities yourself

Prefer to do it online? Our step-by-step guide walks you through opening electricity, gas and internet contracts as a newcomer.

Read the guide →

Blade code

<div class="cc-pair">
    {{-- Primary card (phone CTA) --}}
    <div class="ccard primary">
        <div class="ccard-kicker">
            <svg ...phone icon.../> English advisors
        </div>
        <a href="/moving-to-france/utilities" 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="/moving-to-france/utilities" class="ccard-cta">Call now</a>
    </div>
    {{-- Secondary card --}}
    <div class="ccard">
        ...
        <a href="#" class="ccard-cta">Action →</a>
    </div>
</div>

{{-- Single card --}}
<div class="cc-pair single">
    <div class="ccard primary">...</div>
</div>

FAQ accordion .faq-a

Native <details>/<summary> accordion — no JS. Open state tints the background with var(--accent). Toggle button auto-swaps label via CSS.

Can I open a French bank account before I arrive? Read more Close

With many online banks you can start the application from abroad and finish it once you have a French address. Traditional banks usually require an in-branch appointment and proof of address first.

Check that the bank issues a French IBAN — some EU neobanks only provide a foreign one, which can be refused for rent or tax debits.

How long does it take to get a carte Vitale? Read more Close

Expect 1 to 3 months from a complete CPAM application to your social security number, then a few more weeks for the card itself. In the meantime you can still be reimbursed via your ameli.fr account.

Do I need to validate my long-stay visa? Read more Close

Yes. A VLS-TS must be validated online within 3 months of arrival, and the residence tax paid at the same time. Without validation the visa is not a valid residence permit.

Blade code

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

Helpline card <x-mtf-helpline>

Selectra English-helpline monetisation block for the Moving-to-France vertical. placement=inline|aside, vertical=unified|energy|broadband|insurance, optional topic=car-insurance|home-insurance. The mobile sticky bar (<x-mtf-helpline-footer>) is injected by the article layout and self-gates by path.

In-body — unified

In-body — energy

In-body — broadband

In-body — insurance

In-body — insurance / topic=car-insurance

Aside — insurance (compact)

Blade code

<x-mtf-helpline vertical="unified" placement="inline" />
<x-mtf-helpline vertical="energy" placement="inline" />
<x-mtf-helpline vertical="broadband" placement="inline" />
<x-mtf-helpline vertical="insurance" topic="car-insurance" placement="inline" />
<x-mtf-helpline vertical="insurance" placement="aside" />

Design System — Moving to France

Color tokens

Typography

Vertical accent system

Section spacing <section class="py-4 md:py-6">

In Short block .is-filled

Key takeaway cards .k1 / .k2 / .k3

Fact cards .fact-card

Text box callout .tb

The RIB — your French bank details

Request your tax number early

Expert quote <x-expert-quote>

Verdict cards .verdict-card / .verdict2-pro/.verdict2-con

Pros & Cons <x-pros-cons>

Pros

Cons

Bullet lists .blist

Vlist .vlist

Badges & chips .chip / Tailwind

Link chips .link-chip

See also Tailwind inline

Link cluster (Read next) .multiple-link

Quick nav cards .qn-grid / .qn-card

Table of contents .toc

Contents

Process steps .ps-timeline

Step rows .step-row

Big-number steps .sb-steps / .sb-step

Simple table table.t--simple

Table note .tbl-note

Feature matrix table.t--matrix

Progress bar .bar / .bar-row

Feature cards <x-shared.feature-cards>

Contact cards .ccard / .cc-pair

FAQ accordion .faq-a

Helpline card <x-mtf-helpline>