Brickslab.

@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%).

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