Speculative Application CTA

Careers27: Speculative Application CTA

A centered, muted-panel careers CTA that renders an optional <strong>-highlighted heading, a description paragraph, a mailto: email link, a row of link buttons, and a wrapping row of highlight badges, so candidates without a matching role can still apply.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/careers27?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/careers27?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/careers27.tsx, plus the badge and button shadcn/ui primitives it uses for the highlight badges and action buttons.

Quick start

The installed file exports careers27Demo alongside the block: the exact props behind the preview above. Spread it to get a working speculative-application CTA in one line.

import { Careers27, careers27Demo } from "@/components/beste/block/careers27";

export default function CareersPage() {
  return <Careers27 {...careers27Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Careers27 } from "@/components/beste/block/careers27";

export default function CareersPage() {
  return (
    <Careers27
      heading="Don't see the <strong>right role?</strong>"
      description="Send us your resume and we'll keep you in mind."
      email="careers@company.com"
      buttons={[
        { label: "Send Your Resume", href: "/apply" },
        { label: "View All Positions", href: "/jobs", variant: "outline" },
      ]}
      highlights={["Remote-Friendly", "Competitive Equity"]}
    />
  );
}

Props

type Button = {
  label: string;
  href: string;
  variant?: "default" | "secondary" | "outline";
};

Behavior notes

• Every content region is conditionally rendered: heading, description, and email only appear when truthy, and the button and badge rows only appear when their arrays have length > 0, so passing no props renders just the empty muted panel.
• heading is injected with dangerouslySetInnerHTML, and only nested <strong> elements are styled (they pick up text-primary and font-semibold); any markup you pass is rendered as raw HTML, so trusted input only.
• Each button renders through Button asChild wrapping a Next.js Link, so every href is treated as a client-side navigation target; use full URLs for external links.
• A button's variant falls back to "default" when omitted, mapping to the standard shadcn/ui default, secondary, and outline styles.
• The email is wired only as a mailto: anchor; there is no submit handler, form, or callback, so button clicks navigate and nothing captures the application in-component.
• buttons and highlights are keyed by array index, so reordering or filtering them at runtime can cause React reconciliation churn.
• The panel is fixed to max-w-4xl and center-aligned; buttons and badges wrap via flex-wrap rather than scrolling, and there is no internal height limit.