Promo Card

About this component

A dismissible promo card with image, deadline line, and apply button for programs and offers.

Usage

The import and the props worth knowing about, in one place.

import { Card28 } from "@/components/beste/component/card28";

// The corner X hides the banner and fires onDismiss.
<Card28
  src="/promos/beta.jpg"
  title="Join the beta program"
  description="Help shape the new builder before launch."
  highlight="Only 25 seats"
  note="Applications close Jul 18."
  cta="Request access"
  href="/beta"
  onDismiss={() => console.log("dismissed")}
/>

<Card28
  src="/promos/workshop.jpg"
  title="Free workshop this Thursday"
  cta="Save my seat"
  permanent     // hide the dismiss button
  tone="dark"   // CTA: "primary" (default) | "dark"
  onClick={() => console.log("save seat")}
/>

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Join the beta program

We are opening a short testing window for the new builder. Help shape it before launch.

Only 25 seats

Applications close Jul 18.

Request access

Usage

import { Card28 } from "@/components/beste/component/card28";

<Card28
  src="https://images.unsplash.com/photo-1782898623031-fb7cc9245c24?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  title="Join the beta program"
  description="We are opening a short testing window for the new builder. Help shape it before launch."
  highlight="Only 25 seats"
  note="Applications close Jul 18."
  cta="Request access"
  href="#"
/>

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.

The dismiss button	Takes the card off the page unless `permanent` is set, and calls `onDismiss` so the page can remember.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`src`*	`string`	—	Square image on the left
`title`*	`string`	—	Banner title
`description`	`string`	—	Supporting text under the title
`highlight`	`string`	—	Bold highlight line (e.g. "Only 25 seats")
`note`	`string`	—	Muted note under the highlight (e.g. a deadline)
`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)
`permanent`	`boolean`	—	Hide the dismiss button
`onDismiss`	`() => void`	—	Called when the card is dismissed
`tone`	`"primary" \| "dark"`	—	CTA color
`className`	`string`	—	Additional classes merged onto the root