FS actifs
42
+12%
Stat Grid (BcStatGrid · BcStat)
Grille responsive de cartes KPI pour les dashboards et pages de synthèse.
Démo
En onboarding
18
+3 vs M-1
En attente KYB
7
stable
Bloqués
4
-2 vs M-1
Variante highlight
La carte highlight a un bord gradient gauche et la valeur en gradient text.
html
<BcStat label="Total FS actifs" value="42" trend="+12%" trend-dir="up" highlight />Props — BcStat
| Prop | Type | Défaut | Description |
|---|---|---|---|
| label | String | — | Label uppercase (petits caps) |
| value | String | Number | — | Valeur principale (Poppins Display) |
| unit | String | — | Unité optionnelle affichée après la valeur |
| trend | String | — | Texte du trend (ex: '+12%', '-2 vs M-1') |
| trend-direction | 'up' | 'down' | 'neutral' | 'neutral' | Couleur sémantique du trend |
| highlight | Boolean | false | Bord gradient gauche + valeur colorée |
| loading | Boolean | false | Affiche skeleton |
Props — BcStatGrid
| Prop | Type | Défaut | Description |
|---|---|---|---|
| cols | Number | 4 | Nb colonnes desktop |
| cols-md | Number | 2 | Nb colonnes tablette |
| cols-sm | Number | 1 | Nb colonnes mobile |
Couleurs de trend
| Direction | Couleur | Icône |
|---|---|---|
| up | #22c55e vert | ↑ |
| down | #dc2626 rouge | ↓ |
| neutral | --bc-sub gris | → |