Components Basic
2 Columns
Basic columns-2
Two-column row.
Markup
Drops in as data-pb-block="columns-2".
html
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;"><div style="min-height:3rem;border:1px dashed #cbd5e1;"></div><div style="min-height:3rem;border:1px dashed #cbd5e1;"></div></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-showorx-modelover$store.app.<stateKey>. - On event → run a Flow
- Wire an interaction to a Flow: set
data-pb-flow="<slug>"anddata-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="columns-2"so it imports as a labelled, editable component.