Content Sections
definition-extract
stable Bibliothèque Contenu inline (instance)Expliquer un concept
Bloc GEO « format extractible » : kicker mono, gros statement serif avec le terme défini en accent, rangée de pills, puis un bandeau de specs mono. Sobre, fond paper, pensé pour la citation par les moteurs génératifs.
Instances sur le site
Global 29 instances sur 29 pages
| Page | Position | Contenu | Variante |
|---|---|---|---|
| /services/agent-support-client | section 4 | Définition · format extractible | paper |
| /services/agents-ia | section 4 | Définition · format extractible | paper |
| /services/applications-internes | section 3 | Définition · format extractible | paper |
| /services/automatisation-n8n | section 4 | Définition · format extractible | paper |
| /services/automatisations | section 4 | Définition · format extractible | paper |
| /services/cold-email-b2b | section 3 | Définition · format extractible | paper |
| /services/consultant-ia-claude | section 3 | Définition · format extractible | paper |
| /services/crm-scoring-routing | section 3 | Définition · format extractible | paper |
| /services/donnees-reporting | section 4 | Définition · format extractible | paper |
| /services/integration-claude | section 3 | Définition · format extractible | paper |
| /services/integration-crm | section 3 | Définition · format extractible | paper |
| /services/landing-page-google-ads | section 3 | Définition · format extractible | paper |
| /services/landing-pages-tunnels | section 3 | Définition · format extractible | paper |
| /services/maintenance-growth | section 3 | Définition · format extractible | paper |
| /services/mvp-saas | section 3 | Définition · format extractible | paper |
| /services/prospection-automatisee | section 3 | Définition · format extractible | paper |
| /services/publicite-en-ligne | section 3 | Définition · format extractible | paper |
| /services/referencement-ia | section 3 | Définition · format extractible | paper |
| /services/relance-devis | section 3 | Définition · format extractible | paper |
| /services/seo-geo-contenu | section 3 | Définition · format extractible | paper |
| /services/seo-local | section 3 | Définition · format extractible | paper |
| /services/sequences-de-suivi | section 3 | Définition · format extractible | paper |
| /services/site-web-ia | section 3 | Définition · format extractible | paper |
| /services/sur-mesure-headless | section 3 | Définition · format extractible | paper |
| /services/systeme-acquisition | section 3 | Définition · format extractible | paper |
| /services/systeme-commercial | section 3 | Définition · format extractible | paper |
| /services/systemes-operationnels-ia | section 3 | Définition · format extractible | paper |
| /services/webflow | section 3 | Définition · format extractible | paper |
| /services/wordpress | section 3 | Définition · format extractible | paper |
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
layout | Présentation | text | Non | · | · |
density | Présentation | enum | Non | · | compact · base · ample |
contentAlign | Présentation | enum | Non | · | start · center · end |
actionsAlign | Présentation | enum | Non | · | start · center · end · spread |
placement | Présentation | object | Non | · | · |
columns | Présentation | enum | Non | · | 1 · 2 · 3 · 4 · 5 · 6 · auto |
colRatio | Présentation | enum | Non | · | equal · 1-2 · 2-1 · 1-1-2 · 2-3 · golden |
itemHeight | Présentation | enum | Non | · | auto · even · square · video |
proportion | Présentation | enum | Non | · | 1-1 · 1-2 · 2-1 · 2-3 · 3-2 |
mediaSide | Présentation | enum | Non | · | left · right |
surface | Présentation | enum | Non | · | flat · outlined · filled · elevated · ghost |
divider | Présentation | enum | Non | · | none · hairline · rule |
radius | Présentation | enum | Non | · | none · sm · md · lg |
accentEdge | Présentation | enum | Non | · | none · top · left |
colsMobile | Présentation | enum | Non | · | 1 · 2 · 3 · 4 · auto |
colsTablet | Présentation | enum | Non | · | 1 · 2 · 3 · 4 · auto |
layoutMobile | Présentation | text | Non | · | · |
titleScale | Présentation | enum | Non | · | sm · base · lg · xl |
eyebrow | Présentation | enum | Non | · | none · kicker · badge |
justifyContent | Présentation | enum | Non | · | start · center · end · between · around · evenly |
alignItems | Présentation | enum | Non | · | start · center · end · stretch · baseline |
justifyItems | Présentation | enum | Non | · | start · center · end · stretch |
alignContent | Présentation | enum | Non | · | start · center · end · between · stretch |
cellAlignX | Présentation | enum | Non | · | start · center · end |
cellAlignY | Présentation | enum | Non | · | top · middle · bottom · between |
cellPad | Présentation | enum | Non | · | none · sm · base · lg |
mediaFit | Présentation | enum | Non | · | cover · contain |
mediaRatio | Présentation | enum | Non | · | auto · 1-1 · 4-3 · 3-2 · 16-9 |
reveal | Présentation | enum | Non | · | none · fade · slide-up · slide-down · slide-left · slide-right · scale-in · blur-in · mask-up |
hover | Présentation | enum | Non | · | none · lift · zoom · glow · border · tint · underline · reveal-cta · media-zoom |
pressFeedback | Présentation | enum | Non | · | none · press |
focusRing | Présentation | enum | Non | · | auto · ring · inset · none |
transitionSpeed | Présentation | enum | Non | · | instant · fast · base · slow |
transitionEase | Présentation | enum | Non | · | standard · out · spring |
selectedState | Présentation | enum | Non | · | none · outline · fill · accent-edge |
openState | Présentation | enum | Non | · | auto |
revealStagger | Présentation | bool | Non | · | · |
revealDelay | Présentation | enum | Non | · | none · sm · md |
loop | Présentation | enum | Non | · | none · marquee · pulse · float |
scrollMotion | Présentation | enum | Non | · | none · parallax · pin · progress |
textMotion | Présentation | enum | Non | · | none · word-stagger · count-up · type-on |
motionSpeed | Présentation | enum | Non | · | fast · base · slow |
motionEase | Présentation | enum | Non | · | standard · out · spring |
pageTransition | Présentation | enum | Non | · | none · fade · slide |
cellBg | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink · ink-2 · ink-3 · accent · none |
cellTone | Présentation | enum | Non | · | ink · muted · accent · accent-text · paper |
tone | Présentation | enum | Non | · | ink · muted · accent · accent-text · paper |
borderTone | Présentation | enum | Non | · | hairline · hairline-strong · accent · none |
textFlow | Présentation | enum | Non | · | horizontal · vertical-rl · vertical-lr · sideways |
textTransform | Présentation | enum | Non | · | none · uppercase · lowercase · capitalize |
rotate | Présentation | enum | Non | · | 90 · 180 · none · -90 |
objectPosition | Présentation | enum | Non | · | center · top · bottom · left · right |
overflow | Présentation | enum | Non | · | visible · clip · auto |
scrollSnap | Présentation | enum | Non | · | none · proximity · mandatory |
measure | Présentation | enum | Non | · | prose · read · tight · wide · full |
balance | Présentation | bool | Non | · | · |
clamp | Présentation | enum | Non | · | 1 · 2 · 3 · 4 · none |
minHeight | Présentation | enum | Non | · | auto · half · screen |
width | Présentation | enum | Non | · | full · contained · narrow · prose |
headingLevel | Présentation | enum | Non | · | h2 · h3 |
ariaLabel | Présentation | text | Non | · | · |
headerAlign | Présentation | enum | Non | · | left · center · right |
headerKind | Présentation | enum | Non | · | none · title · eyebrow-title · eyebrow-title-lede · eyebrow-title-lede-cta |
introRow | Présentation | enum | Non | · | none · lede-aside · desc-media-split · lede-centered |
dividers | Présentation | enum | Non | · | none · column-rules · row-rules · grid-lines |
cardContent | Présentation | enum | Non | · | title · title-desc · icon-title-desc · title-desc-meta · media-title-desc |
cardMedia | Présentation | enum | Non | · | none · icon · image · image-bg |
cardAlign | Présentation | enum | Non | · | left · center |
colorDistribution | Présentation | enum | Non | · | uniform · featured-first · one-accent · alternating |
bgSource | Présentation | enum | Non | · | color · image · gradient |
bgImage | Présentation | text | Non | · | · |
kicker | Contenu | text | Non | fr / en | · |
statement | Contenu | text | Oui | fr / en | · |
pills | Contenu | array | Non | · | 0..6 |
specs | Contenu | array | Non | · | 0..8 |
Déclinaisons · 21
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 11 curées, 10 générées.
-
Définition extractible · prose · papier
curéedefinition-extract--paper -
Définition extractible · prose · papier 2
curéedefinition-extract--paper-2 -
Définition extractible · prose · encre
curéedefinition-extract--ink -
Définition extractible · lead + aparté
curéedefinition-extract--lead-aside -
Définition extractible · lead + aparté · encre
curéedefinition-extract--lead-aside-ink -
Définition extractible · fiche à filets
curéedefinition-extract--rows-divided -
Définition extractible · fiche à filets · papier 2
curéedefinition-extract--rows-divided-paper-2 -
Définition extractible · prose · compact
curéedefinition-extract--prose-compact -
Définition extractible · prose · ample
curéedefinition-extract--prose-ample -
Définition extractible · centrée
curéedefinition-extract--center -
Définition extractible · kicker desktop seul
curéedefinition-extract--atomic-kicker-desktop -
definition-extract · prose
généréedefinition-extract--prose -
definition-extract · deux colonnes
généréedefinition-extract--two-col -
definition-extract · liste
généréedefinition-extract--list -
definition-extract · lettrine
généréedefinition-extract--drop-cap -
definition-extract · citation détachée
généréedefinition-extract--pull-quote -
definition-extract · énoncé centré
généréedefinition-extract--centered-statement -
definition-extract · note de marge
généréedefinition-extract--sidenote -
definition-extract · prose numérotée
généréedefinition-extract--numbered-prose -
definition-extract · chapeau 2 colonnes
généréedefinition-extract--two-col-lead -
definition-extract · grand énoncé
généréedefinition-extract--statement-big
Comparer les déclinaisons · 21
Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.
-
Définition extractible · prose · papier
curéedefinition-extract--paperOuvrir dans le builder -
Définition extractible · prose · papier 2
curéedefinition-extract--paper-2background:paper-2Ouvrir dans le builder -
Définition extractible · prose · encre
curéedefinition-extract--inkbackground:inkOuvrir dans le builder -
Définition extractible · lead + aparté
curéedefinition-extract--lead-asidelayout:lead-asideOuvrir dans le builder -
Définition extractible · lead + aparté · encre
curéedefinition-extract--lead-aside-inklayout:lead-asidebackground:inkOuvrir dans le builder -
Définition extractible · fiche à filets
curéedefinition-extract--rows-dividedlayout:rows-dividedOuvrir dans le builder -
Définition extractible · fiche à filets · papier 2
curéedefinition-extract--rows-divided-paper-2layout:rows-dividedbackground:paper-2Ouvrir dans le builder -
Définition extractible · prose · compact
curéedefinition-extract--prose-compactdensity:compactOuvrir dans le builder -
Définition extractible · prose · ample
curéedefinition-extract--prose-ampledensity:ampleOuvrir dans le builder -
Définition extractible · centrée
curéedefinition-extract--centercontentAlign:centerOuvrir dans le builder -
Définition extractible · kicker desktop seul
curéedefinition-extract--atomic-kicker-desktoplayout:rows-dividedplacementOuvrir dans le builder -
definition-extract · prose
généréedefinition-extract--proselayout:proseOuvrir dans le builder -
definition-extract · deux colonnes
généréedefinition-extract--two-collayout:two-colOuvrir dans le builder -
definition-extract · liste
généréedefinition-extract--listlayout:listOuvrir dans le builder -
definition-extract · lettrine
généréedefinition-extract--drop-caplayout:drop-capOuvrir dans le builder -
definition-extract · citation détachée
généréedefinition-extract--pull-quotelayout:pull-quoteOuvrir dans le builder -
definition-extract · énoncé centré
généréedefinition-extract--centered-statementlayout:centered-statementOuvrir dans le builder -
definition-extract · note de marge
généréedefinition-extract--sidenotelayout:sidenoteOuvrir dans le builder -
definition-extract · prose numérotée
généréedefinition-extract--numbered-proselayout:numbered-proseOuvrir dans le builder -
definition-extract · chapeau 2 colonnes
généréedefinition-extract--two-col-leadlayout:two-col-leadOuvrir dans le builder -
definition-extract · grand énoncé
généréedefinition-extract--statement-biglayout:statement-bigOuvrir dans le builder
Sections liées
Même famille
author-byline stable Ligne auteur compacte E-E-A-T sous un h1 d'article : avatar optionnel, nom, rôle, dates de publication et mise à jour, lien vers la page profil. Beaucoup plus léger qu'un hero auteur.
Apparition au scrollDéfilementImage +2 15 décl.direct-answer stable Bloc GEO « réponse directe » en tête de page : reformule une question implicite, définit éventuellement une entité, puis délivre une réponse directe de 2 à 4 phrases en colonne de lecture. Sobre, éditorial, fond alterné.
Badge1 colonne 15 décl.editorial-callout stable Encadré éditorial composant l'atome Callout (info, citation, note, avertissement, manifeste) : hairline accent, citation source optionnelle, tailles et alignements. Pour ponctuer une prose.
Citation1 colonne 20 décl.editorial-dingbat-rule stable Séparateur ornemental éditorial composant l'atome Dingbat (fleuron, asterisme, fin d'article, règle) : transition entre chapitres avec légendes optionnelles au-dessus et en dessous.
Centré 19 décl.editorial-dropcap-prose stable Ouverture d'article éditoriale composant l'atome DropCap : initiale magnifiée (serif, mono ou accent) sur un paragraphe d'accroche, suivie de paragraphes de prose. Pour entrer dans un long-form.
1 colonne 16 décl.editorial-prose stable Wrapper de prose éditoriale tokenisé : colonne de lecture (largeur prose ou wide), fond alterné, héberge un contenu long via slot (corps MDX). Préserve la typographie du DS sans réécrire le texte.
1 colonne 16 décl.Même catégorie
direct-answer stable Bloc GEO « réponse directe » en tête de page : reformule une question implicite, définit éventuellement une entité, puis délivre une réponse directe de 2 à 4 phrases en colonne de lecture. Sobre, éditorial, fond alterné.
Badge1 colonne 15 décl.editorial-callout stable Encadré éditorial composant l'atome Callout (info, citation, note, avertissement, manifeste) : hairline accent, citation source optionnelle, tailles et alignements. Pour ponctuer une prose.
Citation1 colonne 20 décl.editorial-dingbat-rule stable Séparateur ornemental éditorial composant l'atome Dingbat (fleuron, asterisme, fin d'article, règle) : transition entre chapitres avec légendes optionnelles au-dessus et en dessous.
Centré 19 décl.editorial-dropcap-prose stable Ouverture d'article éditoriale composant l'atome DropCap : initiale magnifiée (serif, mono ou accent) sur un paragraphe d'accroche, suivie de paragraphes de prose. Pour entrer dans un long-form.
1 colonne 16 décl.editorial-prose stable Wrapper de prose éditoriale tokenisé : colonne de lecture (largeur prose ou wide), fond alterné, héberge un contenu long via slot (corps MDX). Préserve la typographie du DS sans réécrire le texte.
1 colonne 16 décl.hover-reveal-words stable Prose editoriale dont certains mots declencheurs revelent une vignette image au survol (desktop, suit le curseur) ou au tap (mobile, vignette inline). Accessible au clavier.
Révélation au survolSurvolClic (bascule) +3 16 décl.Similaires
pain-severity-list stable Liste éditoriale de pain-points sur fond ink, classés par sévérité : chaque item porte un label severity vertical (mono) et un glyphe (◆▲●○), un titre serif, une description, et une ligne mono « → correctif ». Séparateurs hairline, reveal-stagger.
Apparition au scrollDéfilementListe +2 21 décl.rich-text stable Section de corps riche : un corps Markdown bilingue rendu en HTML au build avec les styles prose du design system. Edition de corps editorial in-context sans backend (le Markdown vit dans le document de page, versionne avec le code). Titres, listes, liens, gras/italique ; mesure de ligne bornee ; variante ink lisible.
Apparition au scrollSurvolListe +1 15 décl.department-stack stable Stack outils en table éditoriale : en-tête eyebrow et titre display, aside Callout, EditorialTable catégorie/outil/rôle.
Apparition au scrollDéfilementTableau +3 13 décl.architecture-diagram stable Diagramme d'architecture signature : N canaux d'entrée vers un système central et M sorties, avec boucle d'amélioration continue.
Apparition au scrollDéfilementIllustration au trait +1 23 décl.numbered-layer-list stable Liste de couches numerotees : rang serif accent + titre + intro + sous-puces « → ». Ideale pour presenter une stack, des livrables ou des rangs par couche.
Apparition au scrollDéfilementListe +2 18 décl.system-flow stable Rangée horizontale de cartes d'étapes sur fond ink, reliées par des flèches accent, qui raconte le flux du système (site → lead → scoring → CRM → apprentissage). En-tête « Fig. N » + méta mono, grand titre serif avec dernier mot en accent, lede courte, puis une ligne « ↺ boucle d'amélioration continue ». Reveal-stagger, responsive (scroll horizontal / colonne empilée en mobile).
Apparition au scrollDéfilementIllustration au trait +3 16 décl.Code
Données de la section (à placer dans sections[])
{
"type": "definition-extract",
"background": "paper",
"kicker_fr": "§ Définition · format extractible",
"kicker_en": "§ Definition · extractable format",
"statement_fr": "Un <i class=\"acc\">site web intelligent</i> est un site rapide et structuré qui mesure chaque visite, qualifie les contacts, les route vers vos outils et s'améliore en continu : un actif d'acquisition, pas une vitrine.",
"statement_en": "An <i class=\"acc\">intelligent website</i> is a fast, structured site that measures every visit, qualifies contacts, routes them to your tools and keeps improving : an acquisition asset, not a brochure.",
"pills": [
{
"label_fr": "Rapide",
"label_en": "Fast"
},
{
"label_fr": "SEO + GEO",
"label_en": "SEO + GEO"
},
{
"label_fr": "Connecté au CRM",
"label_en": "CRM-connected"
},
{
"label_fr": "Mesurable",
"label_en": "Measurable"
},
{
"label_fr": "Amélioration continue",
"label_en": "Continuous improvement"
}
],
"specs": [
{
"label_fr": "Claude-first",
"label_en": "Claude-first"
},
{
"label_fr": "100/100 Lighthouse",
"label_en": "100/100 Lighthouse"
},
{
"label_fr": "RGPD propre",
"label_en": "Clean GDPR"
},
{
"label_fr": "Tracking server-side",
"label_en": "Server-side tracking"
},
{
"label_fr": "Données structurées",
"label_en": "Structured data"
},
{
"label_fr": "Pipeline",
"label_en": "Pipeline"
}
]
}/library/section/definition-extract.json
Chemin du détail machine
/library/section/definition-extract.json