Footer — Synapse Docs

Sections footer

A footer with links and copyright.

Markup

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

html

<section data-pb-block="footer" class="pb-footer" style="padding:2.5rem 1.5rem;background:#0f172a;color:#cbd5e1;text-align:center;">
  <p class="pb-footer__links" style="margin:0 0 0.75rem;"><a href="#" style="color:#cbd5e1;text-decoration:none;margin:0 0.75rem;">About</a><a href="#" style="color:#cbd5e1;text-decoration:none;margin:0 0.75rem;">Pricing</a><a href="#" style="color:#cbd5e1;text-decoration:none;margin:0 0.75rem;">Contact</a></p>
  <p class="pb-footer__copy" style="margin:0;font-size:0.875rem;color:#64748b;">© Your Company. All rights reserved.</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-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="footer" so it imports as a labelled, editable component.