Alert

Components alert

A callout / alert box.

Markup

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

html

<div data-pb-block="alert" class="pb-alert" role="alert" style="display:flex;gap:0.75rem;align-items:flex-start;padding:1rem 1.15rem;border:1px solid var(--pb-border,#e2e8f0);border-left:4px solid var(--pb-primary,#6366f1);border-radius:var(--pb-radius,0.6rem);background:var(--pb-surface,#f8fafc);color:var(--pb-ink,#0f172a);font-family:inherit;">
  <span aria-hidden="true" style="font-size:1.15rem;line-height:1.3;">ℹ️</span>
  <div><strong class="pb-alert__title" style="display:block;margin-bottom:0.15rem;">Heads up</strong><span class="pb-alert__text" style="color:var(--pb-muted,#64748b);font-size:0.9375rem;">This is an informational message you can edit.</span></div>
</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="alert" 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.