# FAQ Split

Heading and contact link on the left, a springy accordion on the right.

**Kind:** section · FAQ  
**Styles:** Minimal, Dark  
**Built from:** accordion  
**Live preview:** https://charcoalui.com/preview/section/faq-split

## Install

```bash
npx shadcn@latest add https://charcoalui.com/r/faq-split.json
```
Lands in `components/sections/faq-split.tsx` and installs every component it uses.

## Props (all optional, for your copy)

```ts
export type FaqSplitProps = {
  title?: string;
  subtitle?: string;
  contactLabel?: string;
  contactHref?: string;
  items?: AccordionItem[];
};
```

## Source

```tsx
"use client";

import { Accordion, type AccordionItem } from "@/components/ui/accordion";

export type FaqSplitProps = {
  title?: string;
  subtitle?: string;
  contactLabel?: string;
  contactHref?: string;
  items?: AccordionItem[];
};

export function FaqSplit({
  title = "Questions, answered",
  subtitle = "Can't find what you need?",
  contactLabel = "Talk to a human",
  contactHref = "mailto:hello@example.com",
  items = [
    { value: "data", title: "Do you train on my code?", content: "Never. Your code is used only to complete your task and is deleted from our servers within 24 hours." },
    { value: "models", title: "Which models do you use?", content: "We route each step to the model that does it best, and you can pin a model per workspace on Pro and above." },
    { value: "repos", title: "Does it work with monorepos?", content: "Yes. Lumen understands workspaces in pnpm, npm, Yarn, Turborepo and Nx, and respects code owners." },
    { value: "cancel", title: "Can I cancel any time?", content: "Yes, from billing settings, in two clicks. You keep access until the end of the period you paid for." },
    { value: "self", title: "Is there a self-hosted option?", content: "Scale customers can run Lumen in their own cloud account with a dedicated deployment." },
  ],
}: FaqSplitProps) {
  return (
    <section className="bg-background">
      <div className="mx-auto grid grid-cols-1 max-w-6xl gap-12 px-6 py-24 sm:py-32 lg:grid-cols-[1fr_1.5fr]">
        <div>
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">{title}</h2>
          <p className="mt-4 text-muted-foreground">
            {subtitle}{" "}
            <a href={contactHref} className="font-medium text-foreground underline decoration-ember underline-offset-4">
              {contactLabel}
            </a>
          </p>
        </div>
        <Accordion items={items} defaultValue={[items[0]?.value]} />
      </div>
    </section>
  );
}
```