Product Card
-22%Atlas Field Watch
4.8$249$320
-22%A product card with image, price, discount badge, wishlist toggle, and add to cart action for shop grids.
The import and the props worth knowing about, in one place.
import { Card4 } from "@/components/beste/component/card4";
// Image and name link to href; heart and CTA stay independently clickable.
<Card4
src="/products/watch.jpg"
name="Atlas Field Watch"
price="$249"
compareAt="$320" // struck-through original price
badge="-22%" // corner badge
rating={4.8}
href="/products/atlas-field-watch"
onAdd={() => console.log("added to cart")}
onWishlist={(on) => console.log("wishlist", on)}
/>
<Card4
src="/products/lamp.jpg"
name="Dune Desk Lamp"
price="$89"
ctaLabel="Buy now"
tone="primary" // CTA: "dark" (default) | "primary"
onAdd={() => console.log("buy now")}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
-22%import { Card4 } from "@/components/beste/component/card4";
<Card4
src="https://images.unsplash.com/photo-1782231609423-e3cbc454d761?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
name="Atlas Field Watch"
price="$249"
compareAt="$320"
badge="-22%"
rating={4.8}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Product image URL |
name* | string | — | Product name |
price* | string | — | Current price (e.g. "$249") |
compareAt | string | — | Original price, rendered struck through (e.g. "$320") |
badge | string | — | Corner badge (e.g. "New" or "-22%") |
rating | number | — | Rating value shown next to a star (e.g. 4.8) |
href | string | — | If set, the image and name link to this href |
ctaLabel | string | — | CTA label (defaults to "Add to cart") |
onAdd | React.MouseEventHandler<HTMLButtonElement> | — | CTA click handler |
onWishlist | (wishlisted: boolean) => void | — | Called when the wishlist heart is toggled |
tone | "dark" | "primary" | — | CTA tone |
className | string | — | Additional classes merged onto the root |
Orbit One
$189
A product card with a full bleed photo, overlaid name and price, and a floating pill button.
A portrait product teaser card with brand header, availability footer, and a pill button for coming soon pages.
For freelancers shipping client sites.
No credit card required
A complete pricing card with feature list, highlighted state, floating badge, and call to action.
We are opening a short testing window for the new builder. Help shape it before launch.
Only 25 seats
Applications close Jul 18.
A dismissible promo card with image, deadline line, and apply button for programs and offers.
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn moreA feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.
