Terminal Sections

code-showcase

stable Bibliothèque Contenu inline (instance)

Présenter les capacités

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.

Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

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

Aperçu

Comment l'utiliser

Intention

Présenter les capacités

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`intro`	Contenu	`text`	Non	fr / en	·
`background`	Présentation	`enum`	Non	·	paper · paper-2 · ink
`tone`	Présentation	`enum`	Non	·	ink · paper
`label`	Contenu	`text`	Non	·	·
`lang_label`	Contenu	`text`	Non	·	·
`show_line_numbers`	Contenu	`bool`	Non	·	·
`lines`	Contenu	`array`	Oui	·	1..24

Déclinaisons · 18

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

Vitrine code · panneau encre · papier
curée
code-showcase--paper-dark
Vitrine code · panneau encre · papier 2
curée
code-showcase--paper-2-dark
Vitrine code · panneau papier · encre
curée
code-showcase--ink-light
Vitrine code · panneau papier · sans numéros
curée
code-showcase--paper-plain
code-showcase · grille uniforme
générée
code-showcase--grid-uniform
code-showcase · grille auto
générée
code-showcase--grid-auto
code-showcase · grille asymétrique
générée
code-showcase--grid-asym
code-showcase · liste
générée
code-showcase--list
code-showcase · lignes séparées
générée
code-showcase--rows-divided
code-showcase · bento vedette
générée
code-showcase--bento-feature
code-showcase · vedette + split
générée
code-showcase--featured-split
code-showcase · deux colonnes
générée
code-showcase--two-col
code-showcase · alternance
générée
code-showcase--alternating
code-showcase · jeu de cartes
générée
code-showcase--cards-deck
code-showcase · liste média à gauche
générée
code-showcase--list-media-left
code-showcase · grille 3 + vedette
générée
code-showcase--grid-3-featured

Comparer les déclinaisons · 16

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.

Vitrine code · panneau encre · papier
curée
code-showcase--paper-dark
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Vitrine code · panneau encre · papier 2
curée
code-showcase--paper-2-dark
background:paper-2
Ouvrir dans le builder
Vitrine code · panneau papier · encre
curée
code-showcase--ink-light
background:inktone:paper
Ouvrir dans le builder
Vitrine code · panneau papier · sans numéros
curée
code-showcase--paper-plain
tone:papershow_line_numbers:false
Ouvrir dans le builder
code-showcase · grille uniforme
générée
code-showcase--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
code-showcase · grille auto
générée
code-showcase--grid-auto
layout:grid-auto
Ouvrir dans le builder
code-showcase · grille asymétrique
générée
code-showcase--grid-asym
layout:grid-asym
Ouvrir dans le builder
code-showcase · liste
générée
code-showcase--list
layout:list
Ouvrir dans le builder
code-showcase · lignes séparées
générée
code-showcase--rows-divided
layout:rows-divided
Ouvrir dans le builder
code-showcase · bento vedette
générée
code-showcase--bento-feature
layout:bento-feature
Ouvrir dans le builder
code-showcase · vedette + split
générée
code-showcase--featured-split
layout:featured-split
Ouvrir dans le builder
code-showcase · deux colonnes
générée
code-showcase--two-col
layout:two-col
Ouvrir dans le builder
code-showcase · alternance
générée
code-showcase--alternating
layout:alternating
Ouvrir dans le builder
code-showcase · jeu de cartes
générée
code-showcase--cards-deck
layout:cards-deck
Ouvrir dans le builder
code-showcase · liste média à gauche
générée
code-showcase--list-media-left
layout:list-media-left
Ouvrir dans le builder
code-showcase · grille 3 + vedette
générée
code-showcase--grid-3-featured
layout:grid-3-featured
Ouvrir dans le builder

Sections liées

Même famille

agentic-terminal stable

Mockup IDE agentique : fenêtre macOS, explorateur de fichiers, prompt utilisateur et bloc de code qui s'écrit en direct caractère par caractère, puis message de succès, footer stats et badges. Fond encre, accent terracotta.

terminal-shell Terminal Sections Bloc de codeBadge1 colonne 14 décl.

product-reel stable

Reel produit scroll-driven : étapes à gauche pilotées au scroll, console terminal à droite dont le contenu change par écran. Viewport sticky.

terminal-shell Terminal Sections 2 colonnesMédia à droiteScindé 6 décl.

terminal-mockup stable

Console terminal configurable (frame TerminalMockup) : copy optionnelle à gauche, lignes cmd/out/ok/comment et curseur clignotant, layout split ou pleine largeur.

terminal-shell Terminal Sections Apparition au scrollDéfilementBloc de code +3 17 décl.

Même catégorie

agentic-terminal stable

terminal-shell Terminal Sections Bloc de codeBadge1 colonne 14 décl.

product-reel stable

Reel produit scroll-driven : étapes à gauche pilotées au scroll, console terminal à droite dont le contenu change par écran. Viewport sticky.

terminal-shell Terminal Sections 2 colonnesMédia à droiteScindé 6 décl.

terminal-metrics-strip stable

Strip KPI télémétrie tout mono : 2 à 6 cellules clé/valeur bordées de hairlines, esthétique console (uptime, agents, release), fonds paper, paper-2 ou ink.

band Terminal Sections Chiffres clésBloc de code3 colonnes 16 décl.

terminal-mockup stable

Console terminal configurable (frame TerminalMockup) : copy optionnelle à gauche, lignes cmd/out/ok/comment et curseur clignotant, layout split ou pleine largeur.

terminal-shell Terminal Sections Apparition au scrollDéfilementBloc de code +3 17 décl.

Similaires

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.

feature-tabs stable

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

tabs Feature Sections Défilement horizontalSurvolClic (bascule) +9 7 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.

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.

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.

Code

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

{
  "type": "code-showcase",
  "kicker_fr": "[devtools] · API VirtuoseOS",
  "kicker_en": "[devtools] · VirtuoseOS API",
  "h2_fr": "Câblez un agent en <i class=\"acc\">douze</i> lignes.",
  "h2_en": "Wire an agent in <i class=\"acc\">twelve</i> lines.",
  "intro_fr": "Le SDK expose un client typé. Vous décrivez le workflow, la plateforme gère les rails et la relecture.",
  "intro_en": "The SDK exposes a typed client. You describe the workflow, the platform handles rails and review.",
  "background": "paper",
  "tone": "ink",
  "label": "agent.ts",
  "lang_label": "typescript",
  "show_line_numbers": true,
  "lines": [
    {
      "text": "import { Virtuose } from '@virtuose/sdk';"
    },
    {
      "text": ""
    },
    {
      "text": "const v = new Virtuose({ locale: \"fr-FR\" });",
      "comment_fr": "locale pilote le ton des relances",
      "comment_en": "locale drives follow-up tone"
    },
    {
      "text": ""
    },
    {
      "text": "const agent = v.agent({"
    },
    {
      "text": "  source: 'hubspot',",
      "comment_fr": "CRM connecté",
      "comment_en": "connected CRM"
    },
    {
      "text": "  rule: 'score > 70 → relance',",
      "comment_fr": "règle métier",
      "comment_en": "business rule"
    },
    {
      "text": "  review: true,",
      "comment_fr": "relecture humaine obligatoire",
      "comment_en": "human review required"
    },
    {
      "text": "});"
    },
    {
      "text": ""
    },
    {
      "text": "await agent.ship();",
      "comment_fr": "audit trail signé à la sortie",
      "comment_en": "signed audit trail on exit"
    }
  ]
}

Pour un agent / MCP

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

/library/section/code-showcase.json

Chemin du détail machine

/library/section/code-showcase.json