Brickslab.Toolsv2.1.1

@brickslab./ui-web

Bloc de texte courant avec contrôle du ton, de l'alignement et de la largeur maximale. Idéal pour les paragraphes de description, introductions et sections de contenu éditorial.

Aperçu

tone

tone="default"

Bienvenue sur BricksLab, la bibliothèque de composants UI pensée pour la production.

tone="muted"

Ce texte secondaire apporte du contexte sans dominer la hiérarchie visuelle.

tone="brand"

Construisez plus vite avec des composants pensés pour la production.

align

align="left"

The quick brown fox jumps over the lazy dog.

align="center"

The quick brown fox jumps over the lazy dog.

align="right"

The quick brown fox jumps over the lazy dog.

maxWidth

maxWidth="65ch" (défaut)

Ce bloc de texte respecte la longueur de ligne optimale pour la lisibilité, soit environ 65 caractères par ligne.

maxWidth="320px"

Ce bloc est limité à 320px pour un rendu compact adapté aux colonnes étroites.

maxWidth="100%"

Ce bloc occupe toute la largeur disponible de son conteneur parent.

Props

PropTypeDéfautRequisDescription
contentstring—✓Contenu textuel à afficher dans le bloc.
align"left" | "center" | "right""left"—Alignement horizontal du texte.
tone"default" | "muted" | "brand""default"—Couleur du texte. "default" → var(--color-fg), "muted" → var(--color-muted), "brand" → var(--color-brand).
maxWidthstring"65ch"—Largeur maximale du bloc de texte. Utilise une valeur CSS valide (ex. : 65ch, 480px, 100%).
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
  content="..."
  align="left"
  tone="default"
  maxWidth="65ch"
/>
contentaligntonemaxWidth
Override texte: taille + couleur

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

<div style={{ fontSize: "var(--fontsize-lg)" }}>
  <MyComponent
    content="Votre texte"
    tone="brand"
  />
</div>

Utilisation

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

// Tone par défaut
<TextBlock content="Bienvenue sur BricksLab, la bibliothèque de composants UI." />

// Tone muted
<TextBlock
  content="Ce texte secondaire apporte du contexte sans dominer la hiérarchie visuelle."
  tone="muted"
/>

// Tone brand
<TextBlock
  content="Construisez plus vite avec des composants pensés pour la production."
  tone="brand"
/>

// Alignement centré
<TextBlock
  content="Texte centré pour les sections hero ou landing."
  align="center"
/>

// Largeur personnalisée
<TextBlock
  content="Ce bloc est limité à 480px de large pour un rendu compact."
  maxWidth="480px"
/>