Objection Cards

Faq83: Objection Cards

An always-open FAQ that states four buying worries as quoted headings in a hairline matrix of cards, each answering in full and closing on a line of proof under a rule.

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/faq83?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/faq83.tsx plus the badge23 and button21 components it uses for the eyebrow and the closing action.

Quick start

The installed file exports faq83Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Faq83, faq83Demo } from "@/components/beste/block/faq83";

export default function FaqPage() {
  return <Faq83 {...faq83Demo} />;
}

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

import { Faq83 } from "@/components/beste/block/faq83";

export default function FaqPage() {
  return (
    <Faq83
      badge={{ label: "The real questions" }}
      heading="The four things everyone is actually worried about"
      description="Nobody opens a demo call asking about feature parity."
      items={[
        {
          index: "01",
          worry: "We cannot afford a week of chaos while we switch",
          answer: "One clinic goes live first while everything else carries on unchanged.",
          proof: "Eleven practices, none of them closed for a day",
        },
        {
          index: "02",
          worry: "We will be locked in once our records are inside",
          answer: "Thirty days' notice, no penalty, and a full export another system can import.",
          proof: "Clause 6.3 and 6.5 of the agreement, in writing",
        },
      ]}
      closingLabel="Still carrying a worry that is not on this list?"
      button={{ label: "Put it to an engineer", href: "/contact" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Objection = {
  index: string;
  worry: string;
  answer: string;
  proof: string;
};

Behavior notes

• The worry is the heading, in the customer's voice rather than the company's. Quotation marks are added by the block as entities, so pass worry as plain text or you will get doubled quotes.
• proof is required on every card, not optional. The block is built so that no objection is answered without something checkable underneath it.
• The grid lines are the gap, not borders: gap-px over a bg-border container with bg-card cells makes the background show through as one-pixel seams, and the container's overflow-hidden clips the corners so it reads as one panel.
• Cards are flex flex-col with the answer marked flex-1, so the proof lines up along the bottom across every card regardless of answer length.
• The proof line carries its own border-t, so the rule belongs to the proof rather than sitting as a divider in the card.
• The layout is md:grid-cols-2, which is why four items is the count it is tuned for. An odd count leaves the last card spanning one column with a gap beside it.
• index is copy, not a computed counter, so numbering survives reordering untouched.