Product Overlay Card
Orbit One
$189
Orbit One
$189
A product card with a full bleed photo, overlaid name and price, and a floating pill button.
The import and the props worth knowing about, in one place.
import { Card25 } from "@/components/beste/component/card25";
// Button renders a <Link> when href is set, otherwise a <button>.
<Card25
src="/products/orbit-one.jpg"
name="Orbit One"
price="$189"
cta="Shop now"
href="/products/orbit-one"
/>
<Card25
src="/products/night-edition.jpg"
name="Night Edition"
price="$24/m"
cta="Preorder"
tone="primary" // pill: "light" (default) | "primary"
onClick={() => console.log("preorder")}
/>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 photo, fills the whole card |
name* | string | — | Product name in the bottom left |
price | string | — | Price line under the name (e.g. "$189" or "$29/m") |
cta* | string | — | Pill button label |
href | string | — | If set, the button renders as a link to this href |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Button click handler (used when there is no href) |
tone | "light" | "primary" | — | Pill button color |
className | string | — | Additional classes merged onto the root |
