FAQ

Displays a Frequently Asked Questions section with accordion-style questions and answers, including Schema.org microdata for SEO.

Props

Prop	Type	Required	Default	Description
`faq`	`Faq`	Yes	-	FAQ data from Contentstack
`title`	`string`	No	`'Frequently asked questions'`	Section title
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields
`className`	`string`	No	`''`	Additional CSS classes

Usage

1import FAQ from '@/components/molecules/FAQ';
2
3<FAQ 
4  faq={{
5    qas: [
6      {
7        qa: {
8          question: "What is this?",
9          answer: "This is an answer."
10        }
11      }
12    ]
13  }}
14  title="Common Questions"
15/>

import FAQ from '@/components/molecules/FAQ';

<FAQ 
  faq={{
    qas: [
      {
        qa: {
          question: "What is this?",
          answer: "This is an answer."
        }
      }
    ]
  }}
  title="Common Questions"
/>

Features

Semantic HTML: Uses <details> and <summary> for native accordion behavior
Schema.org Microdata: Includes FAQPage, Question, and Answer markup for SEO
Server-side compatible: No client-side JavaScript required
Design system: Uses design system colors and typography
CSLP support: Supports Contentstack Live Preview editing

Schema.org Structure

Wrapper: itemScope itemType="https://schema.org/FAQPage"
Each question: itemScope itemProp="mainEntity" itemType="https://schema.org/Question"
Question text: itemProp="name" on <summary>
Answer: itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer"
Answer text: itemProp="text" on <p>

Notes

Returns null if no QAs are provided or all are invalid
Filters out QAs without both question and answer
Uses Title component for the section heading
Questions are collapsible using native HTML <details> element