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")}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
Orbit One
$189
import { Card25 } from "@/components/beste/component/card25";
<Card25
src="https://images.unsplash.com/photo-1781336541742-497caa97663f?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
name="Orbit One"
price="$189"
cta="Shop now"
href="#"
/>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 |
-22%A product card with image, price, discount badge, wishlist toggle, and add to cart action for shop grids.
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.
For freelancers shipping client sites.
No credit card required
A complete pricing card with feature list, highlighted state, floating badge, and call to action.
A portrait product teaser card with brand header, availability footer, and a pill button for coming soon pages.
A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
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.
