A clear framework
Before starting, you know what we aim for, how the path unfolds, and how progress is tracked.
Component demo
Illustrations inside static cards.
Three standard layouts for adding images to cards, plus a standalone figure. All use existing CSS — no page-specific styles.
Layout 1
Top media card (default)
Image bleeds to the card's top edges, with an optional caption. Wrap the image in a link to enable the lightbox.
Documented follow-up
Objectives, needs, attendance and evaluations are formalised, not left to a mental fog.
A door to funding
Depending on your situation, Qualiopi can open access to public or mutualised funding.
<article class="static-card">
<div class="static-card-media">
<a href="/assets/images/NAME.jpg">
<img src="/assets/images/NAME.jpg" alt="Description">
</a>
<figcaption class="static-card-caption">Caption text</figcaption>
</div>
<h3>Title</h3>
<p class="static-copy">Body text</p>
</article>Wrap the image in <a href="…same image…"> to enable the BaguetteBox lightbox. The image keeps its natural ratio and fills the card width; the white card frame stays around it. Add a figcaption for a caption.
Layout 2
Left media split card
Image on the left, text on the right. Stacks vertically on mobile. Use .static-card-body for the text side.
1. We clarify your need
You tell me the situation: business English, certification, public speaking, mobility, or a precise professional goal.
2. We check the scheme
We look at whether your situation matches CPF, OPCO, company, France Travail or another funding route.
<article class="static-card static-card--media-left">
<div class="static-card-media">
<a href="/assets/images/NAME.jpg">
<img src="/assets/images/NAME.jpg" alt="Description">
</a>
</div>
<div class="static-card-body">
<h3>Title</h3>
<p class="static-copy">Body text</p>
</div>
</article>The image fills the full card height (object-fit: cover), so it crops to the text height with no white gap below. On mobile the card stacks vertically (image on top). Use .static-card-body for the text column.
Layout 3
Media-fill card
Image as the card background with a gradient overlay and white text. Set the image via the inline --card-media variable.
<article class="static-card static-card--media-fill"
style="--card-media: url('/assets/images/NAME.jpg');">
<div class="static-card-media-overlay">
<h3>Title</h3>
<p class="static-copy">Overlay text</p>
</div>
</article>The image is painted as a background-image with a teal gradient overlay and white text on top. Set the image via the inline --card-media variable. Reserve this layout for full-bleed photos — a logo or transparent illustration disappears under the overlay. Adjust the crop with --card-media-ratio (default 16 / 9).
Standalone figure
A floating illustration in a text column.
Use .static-figure--right or --left to float an image beside text, or --center for a centered block.
The certification attests the quality of the training process, not a magic promise of instant bilingualism. It is an audited framework with objectives, follow-up, clear documents, evaluations and continuous improvement.
<figure class="static-figure static-figure--center">
<a href="/assets/images/NAME.jpg">
<img src="/assets/images/NAME.jpg" alt="Description">
</a>
<figcaption>Caption text</figcaption>
</figure>A figure outside a card. Use --center for a centered block (max 720px), or --left / --right to float the image beside text. The lightbox works the same way (image wrapped in <a>).
Layout 4
Heading above a centered image
A section title followed by a standalone figure. Use .static-figure--center for a centered block (max 720px), or --left/--right to float the image beside text.
<div class="static-container">
<div class="static-max-3">
<h2 class="static-heading">Section title</h2>
<p class="static-lede">Intro text.</p>
</div>
<figure class="static-figure static-figure--center static-mt-3">
<a href="/assets/images/NAME.jpg">
<img src="/assets/images/NAME.jpg" alt="Description">
</a>
<figcaption>Caption text</figcaption>
</figure>
</div>A section title in a .static-max-3 wrapper (limits reading width to ~768px) followed by a centered figure. Keep the wrapper full-width only if the title must align with a full-width grid below it.
Text components
Quote, note, muted text and lists
Inline text blocks used inside sections or cards.
Quote
A language path that stands before, during and after the sessions.
Note
CPF, OPCO, company, France Travail — we move forward without promising the impossible.
Muted text
Standard copy paragraph.
A secondary, quieter line for context or disclaimers.
Check list
- Clarify your context and objectives.
- Connect the work to real situations.
- Review progress and next actions.
Clean list
- Business English
- Certification
- Public speaking
<blockquote class="static-quote">Quote text</blockquote>
<p class="static-note">Note with a left accent border.</p>
<p class="static-copy">Standard copy.</p>
<p class="static-muted">Quieter secondary line.</p>
<ul class="static-list-check">
<li>Checked item</li>
</ul>
<ul class="static-list-clean">
<li>Plain item</li>
</ul>.static-quote is an italic blockquote with an orange left border. .static-note is a bordered callout. .static-muted is a smaller, grey secondary line. .static-list-check adds a check bullet; .static-list-clean is a plain list with no markers.
Card variants
Featured and dark cards
Two extra card surfaces: a larger featured card and a teal dark card with actions.
Featured card
More padding and emphasis for a key message. Use it to spotlight one idea inside a grid.
Dark card
If you need an adaptation related to a disability situation, say so from the first exchange.
<article class="static-card-featured">
<h3>Featured card</h3>
<p class="static-copy">More padding and emphasis.</p>
</article>
<article class="static-card-dark">
<h3>Dark card</h3>
<p class="static-copy">White text on teal.</p>
<div class="static-actions">
<a href="/contact/" class="btn-static-text-link">Action</a>
</div>
</article>.static-card-featured is a larger white card for a key message. .static-card-dark is a teal card with white text and an orange h3 — good for emphasis or a CTA. Put actions in a .static-actions wrapper.
Table
Responsive data table
Wrap a <table class="static-table"> in .static-table-wrap for horizontal scroll on small screens.
| Format | Duration | For whom |
|---|---|---|
| Individual | 60 min | Professionals, targeted goals |
| Small group | 90 min | Teams, shared objectives |
| Intensive | Half-day | Preparation, deadlines |
<div class="static-table-wrap">
<table class="static-table">
<thead><tr><th>…</th></tr></thead>
<tbody><tr><td>…</td></tr></tbody>
</table>
</div>Wrap the table in .static-table-wrap so it scrolls horizontally on small screens instead of breaking the layout. The .static-table class styles the header and zebra rows.
Layout helpers
Grid reverse, feature grid, span and alignment
Helpers to vary the rhythm: reverse a 2-column grid, feature a 2fr/1fr block, span a card across two columns, or align items to the start.
Text first
With .static-grid-reverse, the first child moves to the right on desktop and stacks below on mobile.
Card second
The image card sits on the left on desktop.
Main column
.static-feature-grid gives a 2fr main column and a 1fr side column — useful for a lead text beside a small card.
Side card
A compact supporting block.
Card
Standard card.
Span 2
This card spans two columns with .static-span-2.
Card
Standard card.
Aligned to top
.static-grid-start aligns grid items to the start instead of centering them.
The second block keeps its natural height and sits at the top, not vertically centred.
.static-narrow (max 780px) + .static-center centre a short block of text. .static-wide stretches to the container max-width.
<div class="static-grid-2 static-grid-reverse"> … </div>
<div class="static-feature-grid"> … </div>
<article class="static-card static-span-2"> … </article>
<div class="static-grid-2 static-grid-start"> … </div>
<div class="static-narrow static-center"> … </div>static-grid-reverse swaps the two columns on desktop (stacks normally on mobile). static-feature-grid is a 2fr/1fr main+side layout. static-span-2 makes a card span two columns in a 3-col grid. static-grid-start aligns items to the top instead of centering. static-narrow / static-wide control the text block width.
Editorial split
Large alternating image + text rows
Use .static-split for a magazine feel; add .static-split--reverse to flip the image to the right.
Step 01
We clarify your need
You tell me the situation: business English, certification, public speaking, mobility, or a precise professional goal.
Step 02
We check the scheme
We look at whether your situation matches CPF, OPCO, company, France Travail or another funding route.
<div class="static-split">
<div class="static-split__media">
<a href="/assets/images/NAME.jpg"><img src="…" alt="…"></a>
</div>
<div class="static-split__body">
<p class="static-eyebrow--plain">Step 01</p>
<h2 class="static-heading">Title</h2>
<p class="static-lede">Text.</p>
<div class="static-actions"> …CTA… </div>
</div>
</div>
<div class="static-split static-split--reverse"> … </div>A magazine-style row: a narrow image column (5fr) beside a wide text column (7fr), with a 4rem gap. Add static-split--reverse to flip the image to the right. Rows keep their natural ratio (no crop) and get 3.5rem of spacing between them via .static-split + .static-split.
Floating figures
Image beside wrapping text
Use .static-figure--left or --right to float an image inside a text column (stacks full-width on mobile).
The certification attests the quality of the training process, not a magic promise of instant bilingualism. It is an audited framework with objectives, follow-up, clear documents, evaluations and continuous improvement. A language path that stands before, during and after the sessions, connected to the situations where your English must finally keep up with you.
The text wraps around the floating figure, which is useful for an editorial paragraph that needs an illustration without breaking the reading flow.
On the right side, another floating figure shows the same behaviour mirrored. Both figures return to full width on small screens so the layout never feels cramped.
<figure class="static-figure static-figure--left">
<a href="/assets/images/NAME.jpg"><img src="…" alt="…"></a>
<figcaption>Caption</figcaption>
</figure>
<p class="static-copy">Text wraps around the figure…</p>Use --left or --right to float a figure inside a text column; the paragraph wraps around it. The container uses display: flow-root and the section uses clear: both, so the section grows in height and is never overlapped. On mobile the figure returns to full width.
Background image section
A full-bleed image behind the content
Use .static-section--bg with the inline --section-bg variable. Text turns light on the dark overlay. Cards keep their own white surface.
Card on image
Even on a background-image section, a light card keeps its white surface and dark text.
Documented follow-up
Objectives, needs, attendance and evaluations are formalised.
A door to funding
Qualiopi can open access to public or mutualised funding.
<section class="static-section static-section--bg"
style="--section-bg: url('/assets/images/NAME.jpg');">
<div class="static-container">
<div class="static-max-3">
<h2 class="static-heading">Title</h2>
<p class="static-lede">Light text on dark overlay.</p>
</div>
<div class="static-grid-3 static-mt-3">
<article class="static-card"> … </article>
</div>
</div>
</section>Set the image via the inline --section-bg variable on the <section>. A dark teal overlay keeps text readable; cards keep their own white surface. Use this for a strong, photo-driven band.
Light background image
A bright image with a light overlay
Use .static-section--bg-light for bright images — the overlay stays light and the text stays dark.
<section class="static-section static-section--bg-light"
style="--section-bg: url('/assets/images/NAME.jpg');">
<div class="static-container">
<div class="static-max-3">
<h2 class="static-heading">Title</h2>
<p class="static-lede">Dark text on light overlay.</p>
</div>
</div>
</section>Same mechanism as the dark variant, but the overlay stays light so the text stays dark — use it for bright photos where a dark overlay would look heavy.