Brickslab.Toolsv2.1.1

@brickslab./ui-web

Carte 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.

Aperçu

3 cartes dans une grille — avec preview, sans preview, avec href

Exemple de titre

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.
ReactTypeScript
TagChip
Étiquettes compactes pour catégoriser du contenu. 3 variantes, 2 tailles.

Props

PropTypeDéfautRequisDescription
titlestring—✓Titre de la carte d'exemple.
descriptionstring——Description courte de l'exemple ou du composant présenté.
previewReactNode——Contenu de prévisualisation affiché dans la carte. Peut être n'importe quel noeud React.
hrefstring——Lien de navigation. Si fourni, la carte devient cliquable et renvoie vers l'URL spécifiée.
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="..."
  description="..."
  preview={<span>...</span>}
  href="..."
/>
titledescriptionpreviewhref
Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    description="Votre sous-titre"
  />
</div>

Utilisation

tsx
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."
/>