Components Sections
Testimonial
Sections testimonial
A customer quote with attribution.
Markup
Drops in as data-pb-block="testimonial".
html
<section data-pb-block="testimonial" class="pb-testimonial" style="padding:4rem 1.5rem;background:#f8fafc;text-align:center;">
<blockquote class="pb-testimonial__quote" style="font-size:1.5rem;max-width:48rem;margin:0 auto 1rem;font-style:italic;">“This product changed how our team works.”</blockquote>
<p class="pb-testimonial__author" style="color:#475569;margin:0;font-weight:600;">Jane Doe, CEO at Acme</p>
</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-showorx-modelover$store.app.<stateKey>. - On event → run a Flow
- Wire an interaction to a Flow: set
data-pb-flow="<slug>"anddata-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="testimonial"so it imports as a labelled, editable component.