> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gsinghjay/astro-shadcn-sanity/llms.txt
> Use this file to discover all available pages before exploring further.

# FAQ Section

> Split-layout accordion FAQ with a sticky heading column and Portable Text answers.

The `FaqSection` block renders a two-column split: the section heading sticks in the left column while an accordion of questions and Portable Text answers scrolls in the right column. Each item is numbered sequentially. Use it for program FAQs, sponsor Q\&A, or any structured question-and-answer content.

## Props

<ParamField path="heading" type="string">
  Optional section heading rendered as a sticky `<h2>` in the left column at `4xl`–`5xl`. Stays visible as the user scrolls through the accordion items.
</ParamField>

<ParamField path="items" type="FaqItem[]" required>
  Array of FAQ item objects. At least one item is required. Each item renders as an accordion row with a numbered prefix.
</ParamField>

<ParamField path="backgroundVariant" type="'white' | 'light' | 'dark' | 'primary'">
  Background colour token. Defaults to `white`.
</ParamField>

<ParamField path="spacing" type="'none' | 'small' | 'default' | 'large'">
  Vertical padding override. Defaults to `default`.
</ParamField>

<ParamField path="maxWidth" type="'narrow' | 'default' | 'full'">
  Content container max-width. Defaults to `default`.
</ParamField>

<ParamField path="class" type="string">
  Additional CSS classes.
</ParamField>

<ParamField path="id" type="string">
  HTML `id` for anchor targeting.
</ParamField>

### FaqItem fields

Each entry in `items` is a `faqItem` object:

```typescript theme={null}
{
  _key: string;                      // auto-generated by Sanity
  question: string;                  // required — accordion trigger label
  answer: PortableTextBlock[];       // required — Portable Text content
}
```

The `_key` is used as the accordion item `id` for ARIA purposes. Answers rendered from Portable Text are wrapped in a `prose` container; plain-string answers fall back to a `<p>` tag.

## Usage in Sanity Studio

1. Add an **FAQ Section** block to a page.
2. Set an optional **Heading** (e.g. "Frequently Asked Questions").
3. In **Items**, click **Add item** for each question:
   * Enter the **Question** text (required).
   * Write the **Answer** in the Portable Text editor (supports bold, links, lists).
4. Drag items to reorder — the numbered prefix updates automatically.

<Tip>
  The section heading uses `sticky top-24` to remain visible as the user scrolls through long FAQ lists. Make sure the page does not have a taller sticky header that would obscure it.
</Tip>

## Variants / Options

This block has no `variant` field. The layout is always a `SectionSplit` with a sticky heading on the left and an accordion on the right.

## Example

```typescript theme={null}
{
  _type: 'faqSection',
  heading: 'Sponsor FAQ',
  items: [
    {
      _key: 'faq-1',
      question: 'What is the time commitment for sponsors?',
      answer: [
        {
          _type: 'block',
          style: 'normal',
          children: [{ _type: 'span', text: 'Sponsors typically attend two milestone presentations per semester and provide a point-of-contact for weekly student check-ins.' }]
        }
      ]
    },
    {
      _key: 'faq-2',
      question: 'Can we sponsor multiple teams?',
      answer: [
        {
          _type: 'block',
          style: 'normal',
          children: [{ _type: 'span', text: 'Yes. Many partners sponsor two or more teams with different project scopes.' }]
        }
      ]
    }
  ]
}
```