@brickslab./ui-web

Titre sémantique h1–h6 avec contrôle du niveau, du ton et des effets visuels. Les tailles et graisses sont mappées automatiquement via une configuration interne basée sur les tokens CSS.

Aperçu

level — tone: brand (défaut)

level=,1

Heading 1

level=,2

Heading 2

level=,3

Heading 3

level=,4

Heading 4

level=,5

Heading 5

level=,6

Heading 6

tone

tone="brand"

Brand tone

tone="muted"

Muted tone

align

align="left"

BricksLab

align="center"

BricksLab

align="right"

BricksLab

opacity + blurPx

opacity=0.4

Opacité réduite

blurPx=3

Texte flouté

opacity=0.3 + blurPx=4

Combiné

Props

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Texte affiché dans le heading.
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	—	Niveau sémantique HTML — détermine la balise (h1 à h6) et la taille/poids de police via le token mapping interne.
`align`	`"left" \| "center" \| "right"`	`"left"`	—	Alignement horizontal du texte.
`tone`	`"brand" \| "muted"`	`"brand"`	—	Couleur du texte. "brand" → var(--color-brand), "muted" → var(--color-muted).
`opacity`	`number`	`1`	—	Opacité du texte. Clampée automatiquement entre 0 et 1.
`blurPx`	`number`	`0`	—	Flou CSS en pixels. Clampé entre 0 et 10.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  title="..."
  level={1}
  align="left"
  tone="brand"
  opacity={1}
  blurPx={0}
/>

titlelevelaligntoneopacityblurPx

Override texte: taille + couleur

Exemple cible pour personnaliser la taille et la couleur du texte avec les props disponibles sur ce composant.

<MyComponent
  title="Votre texte"
  level={2}
  tone="brand"
/>

Utilisation

tsx

import { Heading } from "@brickslab./ui-web";

// Niveaux (h1 → h6)
<Heading title="Titre principal"  level={1} />
<Heading title="Sous-titre"       level={2} />
<Heading title="Section"          level={3} />
<Heading title="Sous-section"     level={4} />
<Heading title="Libellé"          level={5} />
<Heading title="Caption heading"  level={6} />

// Tones
<Heading title="Brand (défaut)"  level={2} tone="brand" />
<Heading title="Muted"           level={2} tone="muted" />

// Alignement
<Heading title="Centré"  level={3} align="center" />
<Heading title="Droite"  level={3} align="right" />

// Effets visuels
<Heading title="Opacité réduite"  level={3} opacity={0.4} />
<Heading title="Texte flouté"     level={3} blurPx={3} />