FAQ Heading
FAQ Introduction Text
FAQ
The FAQ block creates an accordion list of questions and answers with full layout, typography, and color control.
What It Includes
- Section heading
- Intro text
- Accordion list (questions + answers)
Layout Controls
- Inner spacing (Top/Bottom): Small / Medium / Large
- Inner spacing (Left/Right): Small / Medium / Large
- Content alignment: Left / Center / Right
- Top margin: Use global / None / Small / Medium / Large
- Bottom margin: Use global / None / Small / Medium / Large
- Height (Mobile): Auto / Small (20rem) / Medium (30rem) / Large (40rem)
- Height (Desktop): Auto / Small (20rem) / Medium (30rem) / Large (40rem)
Typography Controls
Section typography
- Heading tag: H1 / H2 / H3
- Heading size: Theme default, XL → 4XL
- Body size: Theme default, SM → XL
FAQ item typography
- Question heading tag: H2 / H3 / H4
- Question font size: Theme default, Small → 4XL
- Answer font size: Theme default, Small → 3XL
Colour Controls
Section colours
- Heading text
- Body text
- FAQ background
FAQ item colours
- Question text
- Answer text
- Accordion background
- Accordion hover background
- Accordion active background
FAQ Settings
- Add FAQ button to create new items
- Each item has Question + Answer fields
- Items can be removed individually
Behaviour
- Only one FAQ item is open at a time.
- Clicking another question closes the previous one.