Waimia.

Feature Sections

feature-tabs

stable Bibliothèque Contenu inline (instance)

Présenter les capacités

Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Rôle de page

Modèle de contenu

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3 · ink
kicker Contenu text Non fr / en ·
h2 Contenu text Oui fr / en ·
intro Contenu text Non fr / en ·
tabs Contenu array Oui · 2..6

Déclinaisons · 7

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.

  • feature-tabs · onglets horizontaux

    générée
    feature-tabs--horizontal-tabs
  • feature-tabs · onglets verticaux

    générée
    feature-tabs--vertical-tabs
  • feature-tabs · segmenté

    générée
    feature-tabs--segmented
  • feature-tabs · pilules

    générée
    feature-tabs--pills
  • feature-tabs · onglets soulignés

    générée
    feature-tabs--underline-tabs
  • feature-tabs · onglets encadrés

    générée
    feature-tabs--boxed-tabs
  • feature-tabs · rail vertical

    générée
    feature-tabs--vertical-rail

Comparer les déclinaisons · 7

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.

  • feature-tabs · onglets horizontaux

    générée
    feature-tabs--horizontal-tabs
    layout:horizontal-tabs
    Ouvrir dans le builder
  • feature-tabs · onglets verticaux

    générée
    feature-tabs--vertical-tabs
    layout:vertical-tabs
    Ouvrir dans le builder
  • feature-tabs · segmenté

    générée
    feature-tabs--segmented
    layout:segmented
    Ouvrir dans le builder
  • feature-tabs · pilules

    générée
    feature-tabs--pills
    layout:pills
    Ouvrir dans le builder
  • feature-tabs · onglets soulignés

    générée
    feature-tabs--underline-tabs
    layout:underline-tabs
    Ouvrir dans le builder
  • feature-tabs · onglets encadrés

    générée
    feature-tabs--boxed-tabs
    layout:boxed-tabs
    Ouvrir dans le builder
  • feature-tabs · rail vertical

    générée
    feature-tabs--vertical-rail
    layout:vertical-rail
    Ouvrir dans le builder

Sections liées

Même famille

offer-rail stable

Offres en onglets (familles) : diptyque ou trio de cartes relie a une rangee de services par une dorsale line-art dessinee au scroll. Une branche peut etre teintee (token --complementary). Vanilla JS aria, 0 dependance.

tabs Feature Sections Apparition au scrollSurvolClic (bascule) +7 7 décl.
pricing-tabs-showcase stable

Showcase de formules avec onglets, cartes illustrées, listes de livrables et bande sur mesure.

tabs Pricing Sections revealtabsSurvol +7 11 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

code-showcase stable

Vitrine de code annoté pour devtools/SaaS technique : copy explicative, bloc code mono avec numéros de ligne et commentaires bilingues alignés, label fichier et langage, tone encre ou paper.

terminal-shell Terminal Sections Défilement horizontalGlisser pour faire défilerIllustration au trait +7 18 décl.
tech-capabilities-specs stable

Inventaire technique en table spec (capacité, description, statut) avec en-tête kicker et aside.

table Feature Sections Défilement horizontalApparition au scrollSurvol +6 9 décl.
media-swap-band stable

Bande 2 ou 3 colonnes dont les images changent en fondu (auto ou au survol), avec CTA.

scroll-interactive Feature Sections Fondu enchaînéRotation automatiqueApparition au scroll +7 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.
guarantee-block stable

Bloc garantie pour expliciter les engagements, réduire le risque perçu et rassurer.

band Feature Sections Liste2 colonnesMédia à droite +1 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-tabs",
  "kicker_fr": "Fonctionnalités clés",
  "kicker_en": "Key features",
  "h2_fr": "Trois <i>capacités</i> qui changent tout",
  "h2_en": "Three <i>capabilities</i> that change everything",
  "intro_fr": "Chaque module est conçu pour s'intégrer en quelques jours, sans dette technique.",
  "intro_en": "Each module is designed to integrate within days, with no technical debt.",
  "tabs": [
    {
      "icon": "⚡",
      "label_fr": "Automatisation",
      "label_en": "Automation",
      "title_fr": "<i>Workflows</i> IA opérationnels en 5 jours",
      "title_en": "AI <i>workflows</i> live in 5 days",
      "body_fr": "Audit, conception et déploiement d'un premier workflow opérationnel en une semaine. Aucune infrastructure préalable requise.",
      "body_en": "Audit, design and deployment of a first operational workflow in one week. No prior infrastructure required.",
      "visual_label_fr": "Diagramme workflow",
      "visual_label_en": "Workflow diagram"
    },
    {
      "icon": "◎",
      "label_fr": "Observabilite",
      "label_en": "Observability",
      "title_fr": "Mesures <i>temps réel</i> sur chaque action",
      "title_en": "<i>Real-time</i> metrics on every action",
      "body_fr": "Chaque execution est loguee, tracee et analysable. Vous savez ce qui fonctionne, ce qui bloque, et pourquoi.",
      "body_en": "Every execution is logged, traced and analyzable. You know what works, what blocks, and why.",
      "visual_label_fr": "Dashboard metriques",
      "visual_label_en": "Metrics dashboard"
    },
    {
      "icon": "↗",
      "label_fr": "Scalabilite",
      "label_en": "Scalability",
      "title_fr": "De 1 a 20 <i>workflows</i> sans refonte",
      "title_en": "From 1 to 20 <i>workflows</i> without rework",
      "body_fr": "L'architecture modulaire permet d'étendre le système progressivement, au rythme de votre équipe.",
      "body_en": "The modular architecture allows extending the system progressively, at your team's pace.",
      "visual_label_fr": "Schema d'echelle",
      "visual_label_en": "Scale diagram"
    }
  ]
}

Pour un agent / MCP

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

/library/section/feature-tabs.json

Chemin du détail machine

/library/section/feature-tabs.json