Components / Basic

Divider

Basic divider

A horizontal rule.

Markup

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

<hr style="border:0;border-top:1px solid #e2e8f0;margin:1.5rem 0;">

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