Synapse

Components Components

Banner

Components banner

Dismissible inline alert strip.

Markup

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

html
<div data-pb-block="banner" class="pb-banner" x-data="{ show: true }" x-show="show" style="display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;border:1px solid #bfdbfe;border-radius:0.5rem;background:#eff6ff;color:#1e3a8a;">
  <svg class="pb-banner__icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
  <span class="pb-banner__message" style="flex:1;line-height:1.5;">Heads up — this is an informational message.</span>
  <button type="button" class="pb-banner__dismiss" @click="show = false" aria-label="Dismiss" style="flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:0.375rem;background:transparent;color:inherit;cursor:pointer;line-height:0;">
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </button>
</div>

Settings

Interactive behaviour is built in; on top of that every block supports:

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="banner" so it imports as a labelled, editable component.
Interactive out of the box
Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.