Brickslab.Libv2.1.5

@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

variant="bgImg" — image de fond, titre et texte au survol / focus

avec cardtitle
sans cardtitle

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" | "bgImg""default"—"default" : pas de couche de fond. "opaque" : fond semi-transparent. "blurred" : fond flouté (effet glassmorphism). "bgImg" : image de fond avec overlay au survol.
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.
imageUrlstring——URL de l'image de fond. Requis pour variant="bgImg". Ignoré pour les autres variantes.
imageAltstring""—Texte alternatif de l'image. Vide par défaut car l'image est décorative (le contenu sémantique est porté par aria-label sur la carte).
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
  texte="..."
  cardtitle="..."
  variant="default"
  opacity={0}
  blurPx={0}
  width={0}
  height={0}
  imageUrl="..."
  // +1 autres props disponibles
/>
textecardtitlevariantopacityblurPxwidthheightimageUrlimageAlt

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

// variant: bgImg (image de fond + overlay au survol)
// Le titre et le texte apparaissent à l'hover ou au focus clavier
<TextCard
  cardtitle="Alpes Suisses"
  texte="Découvrez nos randonnées en montagne"
  variant="bgImg"
  imageUrl="/images/mountain.jpg"
  width={280}
  height={200}
/>

// variant: bgImg sans titre
<TextCard
  texte="Une destination unique"
  variant="bgImg"
  imageUrl="/images/destination.jpg"
  width={280}
  height={200}
/>