Skip to main content
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

​
heading
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.
​
items
FaqItem[]
required
Array of FAQ item objects. At least one item is required. Each item renders as an accordion row with a numbered prefix.
​
backgroundVariant
'white' | 'light' | 'dark' | 'primary'
Background colour token. Defaults to white.
​
spacing
'none' | 'small' | 'default' | 'large'
Vertical padding override. Defaults to default.
​
maxWidth
'narrow' | 'default' | 'full'
Content container max-width. Defaults to default.
​
class
string
Additional CSS classes.
​
id
string
HTML id for anchor targeting.

​
FaqItem fields

Each entry in items is a faqItem object: 
{
  _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.
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.

​
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

{
  _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.' }]
        }
      ]
    }
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us