FAQ

Sections faq

Frequently asked questions.

Markup

Drops in as data-pb-block="faq".

html

<section data-pb-block="faq" class="pb-faq" style="padding:4rem 1.5rem;max-width:48rem;margin:0 auto;">
  <h2 class="pb-faq__title" style="text-align:center;font-size:2rem;margin:0 0 2rem;">Frequently asked questions</h2>
  <div class="pb-faq__item" style="padding:1.25rem 0;border-bottom:1px solid #e2e8f0;"><h3 style="margin:0 0 0.5rem;font-size:1.1rem;">Is there a free trial?</h3><p style="color:#475569;margin:0;">Yes, 14 days, no card required.</p></div>
  <div class="pb-faq__item" style="padding:1.25rem 0;border-bottom:1px solid #e2e8f0;"><h3 style="margin:0 0 0.5rem;font-size:1.1rem;">Can I cancel anytime?</h3><p style="color:#475569;margin:0;">Absolutely — cancel in one click.</p></div>
</section>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="faq" so it imports as a labelled, editable component.