KPI card

Markup canonic · components/kpi.json

sursa = JSON · generat de scripts/build-catalog.py
Venituri lună
12 480 Lei
+8% vs luna trecută

Variante color

.kpi .income / .expense / .profit
Venituri
387.420Lei
↑ 23,4% vs 2025
Cheltuieli
142.880Lei
— stabil
Profit net
244.540Lei
↑ 38% vs 2025

Dark variant — pentru scadențe critice

.kpi.dark · folosit pentru informație super time-sensitive
TVA · scadent
2.184Lei
2 zile · pregătit de Alina
Sold disponibil
9.347Lei
BCR · cont curent
D300 · 25 mai
31zile
declarația lunară

Se încarcă · aria-busy="true" + .skeleton

încărcat ↔ se încarcă · aceeași înălțime, cardul nu sare când sosesc numerele
Venituri facturate
387.420Lei
Încasat 310.000 · Rest 77.420
Venituri facturate
TVA · scadent

Rămâne doar titlul. Unitatea, perioada și etichetele detaliilor vin cu datele — „Lei" lângă o bară goală se citește ca zero. Fiecare bară e înaltă cât cifrele rândului ei și stă pe linia de bază, deci cardul are exact înălțimea celui încărcat. Bara de detalii nu iese din card nici în forma compactă. O încărcare eșuată nu rămâne pe bare: cifra devine —. Primitivul: Skeleton.