Card

Components card

Titled content container with heading, text and a slot.

Markup

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

html

<div data-pb-block="card" class="pb-card" style="max-width:24rem;border:1px solid #e2e8f0;border-radius:0.75rem;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,0.08);overflow:hidden;">
  <div class="pb-card__body" style="padding:1.5rem;">
    <h3 class="pb-card__title" style="margin:0 0 0.5rem;font-size:1.15rem;color:#0f172a;">Card title</h3>
    <p class="pb-card__text" style="margin:0;color:#475569;line-height:1.6;">Supporting copy that explains the content of this card. Add anything you like below.</p>
    <div class="pb-card__slot" style="margin-top:1rem;"></div>
  </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="card" 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.