SectionExampleCard
@brickslab/ui-webCarte d'exemple de composant utilisée dans les pages de galerie ou d'index du catalog. Peut afficher un aperçu interactif, une description et un lien de navigation vers la page dédiée.
3 cartes dans une grille — avec preview, sans preview, avec href
Heading
Titres sémantiques h1–h6 avec contrôle du niveau, du ton et des effets visuels.
TextBlock
Blocs de texte avec contrôle du ton et de la largeur maximale.
TagChip
Étiquettes compactes pour catégoriser du contenu. 3 variantes, 2 tailles.
| Prop | Type | Défaut | Requis | Description |
|---|
title | string | — | ✓ | Titre de la carte d'exemple. |
description | string | — | — | Description courte de l'exemple ou du composant présenté. |
preview | ReactNode | — | — | Contenu de prévisualisation affiché dans la carte. Peut être n'importe quel noeud React. |
href | string | — | — | Lien de navigation. Si fourni, la carte devient cliquable et renvoie vers l'URL spécifiée. |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { SectionExampleCard } from "@brickslab/ui-web";
// Carte avec preview
<SectionExampleCard
title="Heading"
description="Titres sémantiques h1–h6 avec contrôle du ton et des effets visuels."
preview={<h2 style={{ margin: 0 }}>Titre d'exemple</h2>}
href="/components/heading"
/>
// Carte sans preview
<SectionExampleCard
title="TextBlock"
description="Blocs de texte avec contrôle du ton et de la largeur maximale."
href="/components/textblock"
/>
// Carte sans lien (statique)
<SectionExampleCard
title="Composant en développement"
description="Ce composant sera disponible prochainement."
/>
