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
Aperçu
Comment l'utiliser
| 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éefeature-tabs--horizontal-tabs -
feature-tabs · onglets verticaux
généréefeature-tabs--vertical-tabs -
feature-tabs · segmenté
généréefeature-tabs--segmented -
feature-tabs · pilules
généréefeature-tabs--pills -
feature-tabs · onglets soulignés
généréefeature-tabs--underline-tabs -
feature-tabs · onglets encadrés
généréefeature-tabs--boxed-tabs -
feature-tabs · rail vertical
généréefeature-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éefeature-tabs--horizontal-tabslayout:horizontal-tabsOuvrir dans le builder -
feature-tabs · onglets verticaux
généréefeature-tabs--vertical-tabslayout:vertical-tabsOuvrir dans le builder -
feature-tabs · segmenté
généréefeature-tabs--segmentedlayout:segmentedOuvrir dans le builder -
feature-tabs · pilules
généréefeature-tabs--pillslayout:pillsOuvrir dans le builder -
feature-tabs · onglets soulignés
généréefeature-tabs--underline-tabslayout:underline-tabsOuvrir dans le builder -
feature-tabs · onglets encadrés
généréefeature-tabs--boxed-tabslayout:boxed-tabsOuvrir dans le builder -
feature-tabs · rail vertical
généréefeature-tabs--vertical-raillayout:vertical-railOuvrir 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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"
}
]
}/library/section/feature-tabs.json
Chemin du détail machine
/library/section/feature-tabs.json