Wave

Shapes shape-wave

A wavy section divider.

Markup

Drops in as data-pb-block="shape-wave".

html

<div data-pb-block="shape-wave" class="pb-shape" style="line-height:0;"><svg viewBox="0 0 1200 120" preserveAspectRatio="none" style="display:block;width:100%;height:80px;"><path d="M0,0 C300,120 900,0 1200,80 L1200,120 L0,120 Z" fill="#4f46e5"></path></svg></div>

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="shape-wave" so it imports as a labelled, editable component.