About this piece
Metric Card
KPI label, a bold value, and a signed percentage trend badge.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Monthly revenue
$12,459+24%
Usage
import { Card1 } from "@/components/beste/component/card1";
<Card1
surface="card"
bordered
label="Monthly revenue"
value="$12,459"
trend={24}
direction="up"
/>Usage
The import and the props worth knowing about, in one place.
import { Card1 } from "@/components/beste/piece/card1";
<Card1
surface="card"
bordered={true}
inverted={false}
label="Monthly revenue"
value="$12,459"
trend={24}
direction="up"
/>More Card pieces
View all Card#BES-20481· 3 items
Shipped· Arrives Fri
Order Status
Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.
Sessions · this week8,214
Bar Chart Card
Card with a label, headline value, and a row of vertical bars scaled to the data.
Growth
$48/ mo
For teams growing past launch.Unlimited editors
250 GB storage
Realtime analytics
Featured Tier
Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.
64%
Capacityof target
Donut Chart
Thick donut ring with a centered percent, paired with an uppercase caption on the side.
