Back to components
Profile component
Coupon / Voucher Card
Discount coupon card with left accent bar, code, description, expiry, and apply action.
Install
What it does
- Colored left accent bar (red/green/blue per type)
- Coupon code in monospace font
- Description and expiry date
- Apply / use-now action button
When to use
Use it
My vouchers page, coupon listing, offer code display.
Skip it
Promotional banners (use a card with full-width styling instead).
Files & routes added
- components/profile/coupon-card.tsx