FAQ With Contact Panel

Faq87: FAQ With Contact Panel

An accordion FAQ set against a column that sticks while the answers scroll, holding an image tile that floats a live card for the engineer who wrote them and a direct booking action.

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

Base UI flavor

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

This installs the block to components/beste/block/faq87.tsx, the card31 person piece it floats on the tile (installed to components/beste/piece/card31.tsx), and the badge23 and button21 components it uses for the eyebrow and the booking action.

Quick start

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

import { Faq87, faq87Demo } from "@/components/beste/block/faq87";

export default function FaqPage() {
  return <Faq87 {...faq87Demo} />;
}

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

import { Card31 } from "@/components/beste/piece/card31";
import { Faq87 } from "@/components/beste/block/faq87";

export default function FaqPage() {
  return (
    <Faq87
      badge={{ label: "Before you commit" }}
      heading="Answers, and the person who wrote them"
      description="Every answer below came from a real migration call."
      items={[
        {
          question: "What is the most common thing that goes wrong?",
          answer: "Room naming. It only shows up when two clinics share a waiting list.",
        },
        {
          question: "How much of our time does the migration take?",
          answer: "One hour with your practice lead, and roughly two across the dry run.",
        },
      ]}
      mediaTitle="Ask her directly"
      media={
        <Card31
          avatar={{ src: "/people/priya.jpg", alt: "Portrait of Priya Nandan" }}
          name="Priya Nandan"
          role="Migration engineer"
          status="Free from 09:30 today"
          availability="free"
          rows={[{ label: "Call length", value: "30 minutes" }]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      mediaBody="No form, no qualification call, and no handover to somebody else afterwards."
      button={{ label: "Book half an hour", href: "/demo" }}
    />
  );
}

Props

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

type TileImage = {
  src: string;
  alt: string;
};

type FaqItem = {
  question: string;
  answer: string;
};

Behavior notes

• Only one answer is open at a time. open starts at 0, and clicking the open question sets it to -1, so every answer can be closed and the column collapses to a plain list of hairlines.
• The contact column is lg:sticky lg:top-24 lg:self-start. The self-start is required: without it the column stretches to the full grid row height and sticky positioning has nothing to travel within.
• top-24 assumes a fixed header of roughly six rem. Adjust it to match your own navbar, otherwise the card slides under it.
• Sticky is lg and above only. Below that the contact column scrolls normally and lands after the questions.
• Because the accordion column grows and shrinks as answers open, the sticky column can outlast it on a short FAQ. Five or more questions is where the effect reads as intended.
• Answers are conditionally rendered rather than hidden with CSS, and the panel carries pr-11 so the text clears the chevron button.
• The layout is a 1.6fr to 1fr split, keeping the answers at a readable measure while the card column stays only as wide as the piece needs.