About this piece
Order Status
Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
#BES-20481· 3 items
Shipped· Arrives Fri
Usage
import { Card9 } from "@/components/beste/component/card9";
<Card9
orderId="BES-20481"
items={3}
status="shipped"
eta="Arrives Fri"
/>Usage
The import and the props worth knowing about, in one place.
import { Card9 } from "@/components/beste/piece/card9";
<Card9
orderId="BES-20481"
items={3}
status="shipped"
eta="Arrives Fri"
/>More Card pieces
View all CardGrowth · AnnualRenews on May 1, 2026
$480/ year
160 GB of 250 GB used
Current Plan
Subscription status card showing plan name, amount, renewal date, a usage bar, and manage or upgrade buttons.
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.
Review Q2 roadmap with design team
HighDue Tomorrow
Task Card
Checkable todo row with priority chip and due caption. Done tasks strike through.
