Editorial Two-Column FAQ

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq76.tsx instead.

Usage

The file also exports faq76Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq76, faq76Demo } from "@/components/blocks/faq/faq76";

export default function Page() {
  return <Faq76 {...faq76Demo} />;
}

Props

Types

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

Behavior notes

• "use client" because the right column is a real accordion: clicking a question toggles its own answer in local state.
• The left column (eyebrow, heading, note, CTA) sticks to the viewport (lg:sticky lg:top-24) while the accordion scrolls beside it on large screens.
• The CTA renders as a plain button when no ctaHref is passed, or as a Link-backed button when one is; either way it performs no real contact action here.
• Each accordion row shows a small numeric index mark derived from its array position, with hairline rules (divide-y) separating rows instead of cards or borders.