A portrait product teaser card with brand header, availability footer, and a pill button for coming soon pages.
The import and the props worth knowing about, in one place.
import { Card26 } from "@/components/beste/component/card26";
// Button renders a <Link> when href is set, otherwise a <button>.
<Card26
src="/products/lumo-camera.jpg"
brand="LUMO"
subtitle="Field Camera"
status="Launching Friday"
statusNote="Join the waitlist"
cta="Join list"
href="/waitlist"
/>
<Card26
src="/products/atlas-black.jpg"
brand="ATLAS"
status="Back in stock"
cta="Order"
tone="primary" // pill: "light" (default) | "primary"
onClick={() => console.log("order")}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card26 } from "@/components/beste/component/card26";
<Card26
src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=800&auto=format&fit=crop"
brand="LUMO"
subtitle="Field Camera"
status="Launching Friday"
statusNote="Join the waitlist"
cta="Join list"
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 |
brand* | string | — | Small bold brand line in the top left |
subtitle | string | — | Muted line under the brand (e.g. the product type) |
status* | string | — | Bold availability line in the bottom left (e.g. "Launching Friday") |
statusNote | string | — | Muted line under the status |
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.
Orbit One
$189
A product card with a full bleed photo, overlaid name and price, and a floating pill button.
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.
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.
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.
