Feature Sections
offer-rail
stable Sur waimia · 1 Contenu inline (instance)Présenter les capacités, Énoncer la proposition de valeur
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.
Instances sur le site
Global 0 instance en page composable
-
src/pages/index.astro
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 |
kicker | Contenu | text | Oui | fr / en | · |
h2 | Contenu | text | Oui | fr / en | · |
lede | Contenu | text | Oui | fr / en | · |
tablist_label | Contenu | text | Oui | fr / en | · |
families | Contenu | array | Oui | · | 1..6 |
Déclinaisons · 7
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.
-
offer-rail · onglets horizontaux
généréeoffer-rail--horizontal-tabs -
offer-rail · onglets verticaux
généréeoffer-rail--vertical-tabs -
offer-rail · segmenté
généréeoffer-rail--segmented -
offer-rail · pilules
généréeoffer-rail--pills -
offer-rail · onglets soulignés
généréeoffer-rail--underline-tabs -
offer-rail · onglets encadrés
généréeoffer-rail--boxed-tabs -
offer-rail · rail vertical
généréeoffer-rail--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.
-
offer-rail · onglets horizontaux
généréeoffer-rail--horizontal-tabslayout:horizontal-tabsOuvrir dans le builder -
offer-rail · onglets verticaux
généréeoffer-rail--vertical-tabslayout:vertical-tabsOuvrir dans le builder -
offer-rail · segmenté
généréeoffer-rail--segmentedlayout:segmentedOuvrir dans le builder -
offer-rail · pilules
généréeoffer-rail--pillslayout:pillsOuvrir dans le builder -
offer-rail · onglets soulignés
généréeoffer-rail--underline-tabslayout:underline-tabsOuvrir dans le builder -
offer-rail · onglets encadrés
généréeoffer-rail--boxed-tabslayout:boxed-tabsOuvrir dans le builder -
offer-rail · rail vertical
généréeoffer-rail--vertical-raillayout:vertical-railOuvrir dans le builder
Sections liées
Même famille
feature-tabs stable Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.
Défilement horizontalSurvolClic (bascule) +9 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
editorial-preview stable Index éditorial de publications en lignes numérotées (num · date · tag · titre italique · flèche), extrait de FieldNotes.
Apparition au scrollSurvolDéfilement +3 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.
Apparition au scrollSurvolDéfilement +4 29 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.
Apparition au scrollSurvolDéfilement +2 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.offer-tier-grid stable Section de palier d’offres avec eyebrow, H2, lede, grille de cartes et variante hero sombre optionnelle.
Apparition au scrollSurvolDéfilement +4 21 décl.services-grid stable Grille éditoriale de services 3×2 avec figure, métrique, body et ligne de connecteurs en pied de cellule.
Apparition au scrollSurvolDéfilement +2 17 décl.Code
Données de la section (à placer dans sections[])
{
"type": "offer-rail",
"background": "paper",
"kicker_fr": "§ Nos offres",
"kicker_en": "§ Our offers",
"h2_fr": "On <i>conçoit le système</i>, pas juste l’outil.",
"h2_en": "We <i>design the system</i>, not just the tool.",
"lede_fr": "Des offres cohérentes, reliées entre elles : chaque brique alimente la suivante plutôt que de vivre en silo.",
"lede_en": "Coherent offers, wired together: each block feeds the next instead of living in a silo.",
"tablist_label_fr": "Familles d’offres",
"tablist_label_en": "Offer families",
"families": [
{
"id": "famille-a",
"tab_label_fr": "Famille A",
"tab_label_en": "Family A",
"intro_eyebrow_fr": "§ Famille A · pour vos équipes",
"intro_eyebrow_en": "§ Family A · for your teams",
"intro_lede_fr": "Deux briques d’un même système, à activer ensemble ou séparément.",
"intro_lede_en": "Two blocks of one system, activated together or apart.",
"layout": "diptych",
"offers": [
{
"tag_fr": "Offre 01",
"tag_en": "Offer 01",
"title_fr": "Première offre",
"title_en": "First offer",
"body_fr": "La brique d’entrée du système : elle capte, qualifie et alimente le reste en continu.",
"body_en": "The system’s entry block: it captures, qualifies and feeds the rest continuously.",
"points_fr": [
"Un premier bénéfice concret",
"Un deuxième bénéfice mesurable",
"Un troisième, relié à vos outils"
],
"points_en": [
"A first concrete benefit",
"A second measurable benefit",
"A third, wired to your tools"
],
"link_label_fr": "Voir l’offre →",
"link_label_en": "See the offer →",
"link_href": "#"
},
{
"tag_fr": "Offre 02",
"tag_en": "Offer 02",
"title_fr": "Deuxième offre",
"title_en": "Second offer",
"body_fr": "La brique complémentaire, teintée pour la distinguer : elle prolonge la première jusqu’à l’action.",
"body_en": "The complementary block, tinted to stand apart: it extends the first through to action.",
"accent": "complement",
"points_fr": [
"Un bénéfice propre à cette branche",
"Un deuxième, orienté production",
"Un troisième, mesuré"
],
"points_en": [
"A benefit specific to this branch",
"A second, production-oriented",
"A third, measured"
],
"link_label_fr": "Voir l’offre →",
"link_label_en": "See the offer →",
"link_href": "#"
}
],
"rail": true,
"services_intro_fr": "§ Six services, une seule équipe. On active celui qui sert d’abord.",
"services_intro_en": "§ Six services, one team. We turn on the one that serves first.",
"services": [
{
"metric_fr": "Service 1",
"metric_en": "Service 1",
"label_fr": "Libellé du service 1",
"label_en": "Service 1 label",
"sub_fr": "Connecteur · Connecteur · Connecteur",
"sub_en": "Connector · Connector · Connector",
"href": "#"
},
{
"metric_fr": "Service 2",
"metric_en": "Service 2",
"label_fr": "Libellé du service 2",
"label_en": "Service 2 label",
"sub_fr": "Connecteur · Connecteur · Connecteur",
"sub_en": "Connector · Connector · Connector",
"href": "#"
},
{
"metric_fr": "Service 3",
"metric_en": "Service 3",
"label_fr": "Libellé du service 3",
"label_en": "Service 3 label",
"sub_fr": "Connecteur · Connecteur · Connecteur",
"sub_en": "Connector · Connector · Connector",
"href": "#"
},
{
"metric_fr": "Service 4",
"metric_en": "Service 4",
"label_fr": "Libellé du service 4",
"label_en": "Service 4 label",
"sub_fr": "Connecteur · Connecteur · Connecteur",
"sub_en": "Connector · Connector · Connector",
"href": "#"
},
{
"metric_fr": "Service 5",
"metric_en": "Service 5",
"label_fr": "Libellé du service 5",
"label_en": "Service 5 label",
"sub_fr": "Connecteur · Connecteur · Connecteur",
"sub_en": "Connector · Connector · Connector",
"href": "#"
},
{
"metric_fr": "Service 6",
"metric_en": "Service 6",
"label_fr": "Libellé du service 6",
"label_en": "Service 6 label",
"sub_fr": "Connecteur · Connecteur · Connecteur",
"sub_en": "Connector · Connector · Connector",
"href": "#"
}
]
},
{
"id": "famille-b",
"tab_label_fr": "Famille B",
"tab_label_en": "Family B",
"intro_eyebrow_fr": "§ Famille B · pour un autre besoin",
"intro_eyebrow_en": "§ Family B · for another need",
"intro_lede_fr": "Trois leviers sur une seule base, pour couvrir un besoin de bout en bout.",
"intro_lede_en": "Three levers on one base, covering a need end to end.",
"layout": "trio",
"offers": [
{
"tag_fr": "Levier 01",
"tag_en": "Lever 01",
"title_fr": "Premier levier",
"title_en": "First lever",
"body_fr": "Le levier qui alimente : il va chercher ce que le reste n’a pas capté.",
"body_en": "The lever that feeds: it goes after what the rest missed.",
"link_label_fr": "Voir le levier →",
"link_label_en": "See the lever →",
"link_href": "#"
},
{
"tag_fr": "Levier 02",
"tag_en": "Lever 02",
"title_fr": "Deuxième levier",
"title_en": "Second lever",
"body_fr": "Le levier qui qualifie et priorise : rien ne refroidit dans une file.",
"body_en": "The lever that qualifies and prioritises: nothing goes cold in a queue.",
"link_label_fr": "Voir le levier →",
"link_label_en": "See the lever →",
"link_href": "#"
},
{
"tag_fr": "Levier 03",
"tag_en": "Lever 03",
"title_fr": "Troisième levier",
"title_en": "Third lever",
"body_fr": "Le levier qui relance : des suivis déclenchés par le comportement.",
"body_en": "The lever that follows up: touches triggered by behaviour.",
"link_label_fr": "Voir le levier →",
"link_label_en": "See the lever →",
"link_href": "#"
}
],
"services_intro_fr": "§ Trois leviers, un seul système. On active celui qui bouche la fuite qui coûte d’abord.",
"services_intro_en": "§ Three levers, one system. We turn on the one that plugs the costliest leak first.",
"panel_cta_label_fr": "Voir le système complet →",
"panel_cta_label_en": "See the full system →",
"panel_cta_href": "#"
}
]
}/library/section/offer-rail.json
Chemin du détail machine
/library/section/offer-rail.json