Composant · Autres

Overline

Stable

Étiquette de section discrète en petites capitales — les « DOCUMENTATION », « SIGNAUX », « COMMUNITIES » des maquettes. Rôle : libellé de groupe de niveau 0, en ton secondaire, posé au-dessus d'un bloc. Avec as="h2" / as="h3" elle porte la sémantique de titre d'une région. Style token-only : chaque --st-component-overline-* retombe sur un littéral, donc un thème qui n'émet rien rend à l'identique.

Exemples

Un overline inline en libellé de groupe, puis un overline en en-tête de région (as="h3").

Libellés de section

Documentation

Libellé de groupe discret, posé au-dessus d'un bloc de contenu.

Signaux

En-tête de région (as="h3") : porte la sémantique de titre.

Voir le code (Svelte)

<div class="overline-demo-col">
  <div class="overline-demo-group">
    <Overline>Documentation</Overline>
    <p class="overline-demo-body">Libellé de groupe discret, posé au-dessus d'un bloc de contenu.</p>
  </div>
  <div class="overline-demo-group">
    <Overline as="h3">Signaux</Overline>
    <p class="overline-demo-body">En-tête de région (as="h3") : porte la sémantique de titre.</p>
  </div>
</div>

API du composant

Prop	Type	Défaut	Description
`as`	`'span' \| 'div' \| 'h2' \| 'h3'`	`'span'`	Balise rendue. span/div = neutre ; h2/h3 = en-tête de région.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.
`children`	`Snippet`	–	Contenu du libellé.

Tokens CSS

Variable CSS	Description
`--st-component-overline-color`	Couleur du libellé (retombe sur le texte secondaire).
`--st-component-overline-fontSize` / `-fontWeight`	Taille et graisse.
`--st-component-overline-letterSpacing` / `-textTransform`	Interlettrage et casse (small-caps).