Stat card

Data kpi

A KPI number aggregated from a collection (count/sum/avg).

Markup

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

html

<div data-pb-block="kpi" class="pb-kpi" data-pb-collection="" data-pb-metric="count" data-pb-field="" data-pb-label="Total" style="font-family:inherit;border:1px solid #e2e8f0;border-radius:0.75rem;padding:1.25rem 1.5rem;background:#fff;min-width:12rem;display:inline-flex;flex-direction:column;gap:0.4rem;">
  <span class="pb-kpi__label" style="font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:#64748b;">Total</span>
  <span class="pb-kpi__value" data-pb-kpi-value style="font-size:2rem;font-weight:700;color:#0f172a;line-height:1.1;">—</span>
</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="kpi" so it imports as a labelled, editable component.
Array source: Iterates a State array with x-for="item in $store.app.<key>"; bind each item with x-text="item.<field>".
Live updates: A Flow setState action updates the bound array and the list re-renders without a reload.