Brickslab.

@brickslab/ui-web

Carte de contenu texte avec trois variantes de fond : transparent, semi-opaque et flouté (glassmorphism). Compose le composant Text en interne. La variante blurred requiert un arrière-plan visible pour que l'effet soit perceptible.

Aperçu

variant="default"

avec cardtitle

Statistiques

124 nouveaux utilisateurs

sans cardtitle

Texte seul, sans titre

variant="opaque"

opacity=0.5 (défaut)

Maintenance

Service temporairement indisponible

opacity=0.15

Info

Fond très transparent

variant="blurred" — fond dégradé pour démonstration

blurPx=6 (défaut)

Glassmorphism

Fond flouté avec gradient

blurPx=14

Blur très intense

opacity=0.1 + blurPx=8

Subtil

Fond quasi invisible

Props

PropTypeDéfautRequisDescription
textestring—✓Texte principal affiché dans la carte (via le composant Text interne).
cardtitlestring——Titre optionnel de la carte. Si présent, affiché au-dessus de texte avec la variante body-lg et le ton brand.
variant"default" | "opaque" | "blurred""default"—"default" : pas de couche de fond. "opaque" : fond semi-transparent. "blurred" : fond flouté (effet glassmorphism).
opacitynumber——Override de l'opacité du fond. Défaut selon variant : 0.5 (opaque), 0.3 (blurred).
blurPxnumber——Override de l'intensité du flou en pixels. Défaut : 6 (blurred). Ignoré pour default et opaque.
widthnumber——Largeur en pixels. Si omis, la carte s'adapte à son contenu.
heightnumber——Hauteur en pixels. Si omis, la carte s'adapte à son contenu.

Utilisation

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

// variant: default (pas de fond)
<TextCard
  cardtitle="Statistiques"
  texte="124 nouveaux utilisateurs"
  width={280}
  height={110}
/>

// variant: opaque (fond semi-transparent)
<TextCard
  cardtitle="Maintenance"
  texte="Service temporairement indisponible"
  variant="opaque"
  width={280}
/>

// variant: opaque avec opacité personnalisée
<TextCard
  texte="Fond très transparent"
  variant="opaque"
  opacity={0.15}
  width={280}
/>

// variant: blurred (effet glassmorphism)
// ⚠️  Nécessite un fond visible derrière la carte
<TextCard
  cardtitle="Glassmorphism"
  texte="Fond flouté"
  variant="blurred"
  width={280}
/>

// variant: blurred avec intensité de flou personnalisée
<TextCard
  texte="Blur intense"
  variant="blurred"
  blurPx={14}
  width={280}
/>