Skip to content

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.