Product Teaser Card

About this component

A portrait product teaser card with brand header, availability footer, and a pill button for coming soon pages.

Usage

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")}
/>

Keyboard and gestures

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.

Props

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