Waimia.
Réserver un audit →

Feature Sections

feature-grid

stable Sur waimia · 36 Contenu inline (instance)

Présenter les capacités

Grille de fonctionnalités pour structurer les bénéfices ou capacités principales d'une offre.

features grid
Ouvrir dans le builder

Instances sur le site

Global 34 instances sur 31 pages

Page Position Contenu Variante
/lp/hub section 2 Repérez votre situation, on vous mène à la bonne page paper
/lp/systeme-acquisition section 5 Les briques, de l'acquisition au commercial paper
/lp/systeme-ia-marketing section 5 Ce qu'un système exécute chez vous. paper
/services/agent-support-client section 10 Ce qu'un agent de support exécute chez vous paper
/services/agents-ia section 7 Ce qu'un agent exécute chez vous paper
/services/applications-internes section 8 Les briques d'un outil interne solide paper
/services/automatisation-n8n section 10 Les briques d'un workflow n8n qui tient paper
/services/automatisations section 7 Les briques d'une automatisation qui tient paper
/services/cold-email-b2b section 4 Cold email B2B et RGPD : est-ce légal en France ? paper-2
/services/cold-email-b2b section 9 Les briques d'un cold email qui arrive en boîte paper
/services/consultant-ia-claude section 8 Quatre décisions avant la moindre ligne de code paper
/services/crm-scoring-routing section 8 Les briques d'un CRM qui note et route paper
/services/donnees-reporting section 7 Les briques d'un reporting automatisé qui tient paper
/services/integration-claude section 8 Déployer Claude dans votre entreprise paper
/services/integration-claude section 9 Claude ou ChatGPT pour votre entreprise paper-2
/services/integration-crm section 8 Les briques d'un CRM branché et propre, sur HubSpot ou Pipedrive paper
/services/landing-page-google-ads section 8 Les briques d'une landing qui convertit le clic payé paper
/services/landing-pages-tunnels section 8 Les briques d'un tunnel qui convertit paper
/services/maintenance-growth section 8 Les briques d'un forfait qui fait vivre le site paper
/services/mvp-saas section 8 Les briques d'un MVP SaaS qui se vend paper
/services/prospection-automatisee section 4 Prospection B2B et RGPD : ce que la loi autorise vraiment paper-2
/services/prospection-automatisee section 9 Les briques de la prospection automatisée paper
/services/publicite-en-ligne section 8 Les leviers d'une publicité qui rapporte paper
/services/referencement-ia section 8 Les briques d'un référencement IA qui cite paper
/services/relance-devis section 8 Les briques d'une relance de devis qui signe paper
/services/seo-geo-contenu section 8 Les briques d'une machine éditoriale paper
/services/seo-local section 8 Les briques d'un référencement local qui capte paper
/services/sequences-de-suivi section 8 Les briques d'un suivi qui relance et réveille paper
/services/site-web-ia section 8 Les briques d'un site web intelligent paper
/services/sur-mesure-headless section 8 Les briques du sur-mesure paper
/services/systeme-acquisition section 8 Les briques, de l'acquisition au commercial paper
/services/systeme-commercial section 8 Les modules qui alimentent votre pipeline commercial paper
/services/webflow section 8 Ce qu'on branche sur Webflow paper
/services/wordpress section 8 Ce qu'on branche sur WordPress paper

Composé inline inline · non éditable ici

  • src/pages/en/index.astro
  • src/pages/index.astro

Aperçu

Comment l'utiliser

Intention

Présenter les capacités

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Effets

Zoom au survol Apparition au scroll

Interactions

Survol Défilement

Éléments

Image Illustration au trait Liste Icônes

Mise en page

Multi-colonnes Centré Scindé

Contrat de slots

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 ·
h2 Contenu text Oui fr / en ·
lede Contenu text Non fr / en ·
header_cta_label Contenu text Non fr / en ·
header_cta_href Contenu url Non · ·
intro_desc Contenu text Non fr / en ·
intro_media Contenu text Non · ·
features Contenu array Oui · 3..8
fillMedia Contenu text Non · ·

Déclinaisons · 22

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 8 curées, 14 générées. Échantillon des 12 premières générées (sur 14) ; toutes accessibles en rendu isolé.

  • Grille features · papier

    curée
    feature-grid--paper

  • Grille features · 3 colonnes · encre

    curée
    feature-grid--3col-ink

  • Grille features · survol élévation (lift)

    curée
    feature-grid--hover-lift

  • Grille features · cellules multicolores (contraste auto)

    curée
    feature-grid--cells-multicolor

  • Grille features · CTA poussé en bas de carte

    curée
    feature-grid--cta-bottom

  • Grille features · grille centrée (justify-content)

    curée
    feature-grid--justify-center

  • Grille features · axe direction (pile / column)

    curée
    feature-grid--direction-column-demo

  • Grille features · axe item-order (réordonne les cellules)

    curée
    feature-grid--item-order-demo

  • feature-grid · grille uniforme

    générée
    feature-grid--grid-uniform

  • feature-grid · grille auto

    générée
    feature-grid--grid-auto

  • feature-grid · grille asymétrique

    générée
    feature-grid--grid-asym

  • feature-grid · liste

    générée
    feature-grid--list

  • feature-grid · lignes séparées

    générée
    feature-grid--rows-divided

  • feature-grid · bento vedette

    générée
    feature-grid--bento-feature

  • feature-grid · vedette + split

    générée
    feature-grid--featured-split

  • feature-grid · deux colonnes

    générée
    feature-grid--two-col

  • feature-grid · alternance

    générée
    feature-grid--alternating

  • feature-grid · jeu de cartes

    générée
    feature-grid--cards-deck

  • feature-grid · liste média à gauche

    générée
    feature-grid--list-media-left

  • feature-grid · grille 3 + vedette

    générée
    feature-grid--grid-3-featured

Comparer les déclinaisons · 20

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.

  • Grille features · papier

    curée
    feature-grid--paper
    background:paper
    Ouvrir dans le builder

  • Grille features · 3 colonnes · encre

    curée
    feature-grid--3col-ink
    background:ink
    Ouvrir dans le builder

  • Grille features · survol élévation (lift)

    curée
    feature-grid--hover-lift
    background:paperlayout:grid-uniformhover:lift
    Ouvrir dans le builder

  • Grille features · cellules multicolores (contraste auto)

    curée
    feature-grid--cells-multicolor
    background:paperlayout:grid-uniformfeatures
    Ouvrir dans le builder

  • Grille features · CTA poussé en bas de carte

    curée
    feature-grid--cta-bottom
    background:paperlayout:grid-uniformcellAlignY:between
    Ouvrir dans le builder

  • Grille features · grille centrée (justify-content)

    curée
    feature-grid--justify-center
    background:paperlayout:grid-autojustifyContent:center
    Ouvrir dans le builder

  • Grille features · axe direction (pile / column)

    curée
    feature-grid--direction-column-demo
    background:paperlayout:grid-autodirection:column
    Ouvrir dans le builder

  • Grille features · axe item-order (réordonne les cellules)

    curée
    feature-grid--item-order-demo
    background:paperlayout:grid-uniformitemOrder
    Ouvrir dans le builder

  • feature-grid · grille uniforme

    générée
    feature-grid--grid-uniform
    layout:grid-uniform
    Ouvrir dans le builder

  • feature-grid · grille auto

    générée
    feature-grid--grid-auto
    layout:grid-auto
    Ouvrir dans le builder

  • feature-grid · grille asymétrique

    générée
    feature-grid--grid-asym
    layout:grid-asym
    Ouvrir dans le builder

  • feature-grid · liste

    générée
    feature-grid--list
    layout:list
    Ouvrir dans le builder

  • feature-grid · lignes séparées

    générée
    feature-grid--rows-divided
    layout:rows-divideddividers:row-rules
    Ouvrir dans le builder

  • feature-grid · bento vedette

    générée
    feature-grid--bento-feature
    layout:bento-feature
    Ouvrir dans le builder

  • feature-grid · vedette + split

    générée
    feature-grid--featured-split
    layout:featured-split
    Ouvrir dans le builder

  • feature-grid · deux colonnes

    générée
    feature-grid--two-col
    layout:two-colcolumns:2
    Ouvrir dans le builder

  • feature-grid · alternance

    générée
    feature-grid--alternating
    layout:rows-dividedcolorDistribution:alternating
    Ouvrir dans le builder

  • feature-grid · jeu de cartes

    générée
    feature-grid--cards-deck
    layout:grid-uniformcolumns:4density:compact
    Ouvrir dans le builder

  • feature-grid · liste média à gauche

    générée
    feature-grid--list-media-left
    layout:listcardMedia:imagecardContent:media-title-desc
    Ouvrir dans le builder

  • feature-grid · grille 3 + vedette

    générée
    feature-grid--grid-3-featured
    layout:grid-uniformcolorDistribution:featured-first
    Ouvrir dans le builder

Sections liées

Même famille

article-grid stable

Grille de cartes d’articles/blog : image optionnelle, tag, titre, date, temps de lecture, extrait, auteur et lien, en 2 ou 3 colonnes. Le classique éditorial B2B.

card-grid Content Listing Sections SurvolImageIcônes +3 18 décl.
case-card-grid stable

Table éditoriale de cas clients en six colonnes (index, client, secteur, stack, impact, flèche) façon compte rendu d'audit.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +3 31 décl.
case-featured-grid stable

Grille de cas clients « featured » : un cas mis en avant (colonne large, cover optionnelle) plus des cas secondaires en lignes numérotées, avec chip de provenance.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +6 17 décl.
challenges-grid stable

Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.

card-grid Feature Sections SurvolIllustration au traitIcônes +4 16 décl.
commitments-grid stable

Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.
deliverables-grid stable

Grille de livrables tangibles avec cards numérotées et tag format/durée, extraite des pages offre et détail.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 29 décl.

Même catégorie

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.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +1 23 décl.
bento-grid stable

Mosaique bento asymetrique de 5 cellules (1 grande 2x2 + 4 petites) pour valoriser les capacites cles avec une mise en page moderne.

bento Feature Sections IcônesCartesListe +1 26 décl.
challenges-grid stable

Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.

card-grid Feature Sections SurvolIllustration au traitIcônes +4 16 décl.
coming-soon-pills stable

Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.

list Feature Sections ListeBadge1 colonne 16 décl.
commitments-grid stable

Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.
decision-list stable

Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.

list Feature Sections Apparition au scrollDéfilementListe +1 17 décl.

Similaires

problems-grid stable

Grille de problèmes/frictions auto-fit (3 cards min) : num + kicker + h3 + body, séparateurs hairline 1px.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.
icon-trio stable

Trois colonnes iconographiques avec titre et description, séparées par des hairlines verticaux. Idéal pour présenter 3 piliers ou bénéfices distincts.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.
use-case-index stable

Index éditorial de cas d'usage en lignes numérotées avec libellé italique, tag mono et lien d'ancrage solution.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +2 17 décl.
editorial-preview stable

Index éditorial de publications en lignes numérotées (num · date · tag · titre italique · flèche), extrait de FieldNotes.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +3 17 décl.
editorial-split-grid stable

Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 17 décl.
why-stalls stable

Section éditoriale "pourquoi X cale" : chapter label sticky à gauche + N FIG rows à droite avec row-lines.

card-grid Feature Sections DéfilementIllustration au trait2 colonnes +2 14 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "feature-grid",
  "kicker_fr": "Démo · grille features",
  "kicker_en": "Demo · features grid",
  "h2_fr": "Trois <i>piliers</i> du DS Waimia",
  "h2_en": "Three <i>pillars</i> of Waimia DS",
  "lede_fr": "Un système de design figé, exhaustif et propagé partout en une édition.",
  "lede_en": "A frozen, exhaustive design system propagated everywhere in one edit.",
  "header_cta_label_fr": "Ouvrir le DS Studio",
  "header_cta_label_en": "Open DS Studio",
  "header_cta_href": "/agence/ds-studio",
  "intro_desc_fr": "Chaque section compose les mêmes tokens : couleur, espacement, typo, ombre. Changer une valeur la propage à tout le catalogue, sans dette.",
  "intro_desc_en": "Every section composes the same tokens: color, spacing, type, shadow. Change one value and it propagates across the whole catalogue, debt-free.",
  "intro_media": "/images/editorial/image-style-10.webp",
  "features": [
    {
      "icon": "tokens",
      "title_fr": "Tokens canoniques",
      "title_en": "Canonical tokens",
      "body_fr": "115 tokens CSS exposés à :root. Pioche, n'invente pas.",
      "body_en": "115 CSS tokens at :root. Pick, never invent.",
      "meta_fr": "115 tokens",
      "meta_en": "115 tokens",
      "media": "/images/editorial/image-style-4.webp",
      "cta_label_fr": "Voir les tokens",
      "cta_label_en": "View tokens",
      "cta_href": "/library"
    },
    {
      "icon": "grid",
      "title_fr": "Composants atomiques",
      "title_en": "Atomic components",
      "body_fr": "114 composants en 7 couches Tier 1.",
      "body_en": "114 components across 7 Tier 1 layers.",
      "meta_fr": "114 composants",
      "meta_en": "114 components",
      "media": "/images/editorial/image-style-6.webp",
      "cta_label_fr": "Explorer",
      "cta_label_en": "Explore",
      "cta_href": "/library"
    },
    {
      "icon": "shield",
      "title_fr": "Anti-hallucination",
      "title_en": "Anti-hallucination",
      "body_fr": "5 anti-patterns documentés avec commandes de détection.",
      "body_en": "5 anti-patterns documented with detection commands.",
      "meta_fr": "5 garde-fous",
      "meta_en": "5 guardrails",
      "media": "/images/editorial/image-style-7.webp",
      "cta_label_fr": "Lire la doc",
      "cta_label_en": "Read docs",
      "cta_href": "/library"
    },
    {
      "icon": "layers",
      "title_fr": "Moteur de layout",
      "title_en": "Layout engine",
      "body_fr": "Un CSS unique porte toutes les recettes ; les composants se branchent.",
      "body_en": "One CSS file holds every recipe; components plug in.",
      "meta_fr": "10 familles",
      "meta_en": "10 families",
      "media": "/images/editorial/image-style-8.webp",
      "cta_label_fr": "Voir le moteur",
      "cta_label_en": "View engine",
      "cta_href": "/library"
    }
  ],
  "columns": "3"
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/feature-grid.json

Chemin du détail machine

/library/section/feature-grid.json