Heading
@brickslab/ui-webTitre 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.
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é
| 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. |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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} />
