docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Stats

Stats ​

Several KPIs in a row or grid: years in business, client count, and similar figures. Large number, small caption.

Stats

Why show numbers ​

  • Numbers scan fast, no table needed
  • KPI updates by editor, not by redeploying templates
  • value/label pairs are predictable in Fenom

Typical placement ​

  • Homepage: company KPIs
  • B2B landing: scale, coverage, SLA
  • About page: facts instead of long copy

Page examples ​

Metrics repeater ​

Metrics repeater: Value and Label per row. Three or four items usually work best.

Similar sections ​

  • Cards for text benefits without numeric focus
  • Spec table for parameter/value rows (Pro)

Block parameters ​

ParameterValue
keystats
LayerFree
Categorysocial proof (social)
Chunkpagebuilder_stats
Requires—

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Metrics (items) ​

Type repeater. Required. Repeatable rows. "Add" button in the inspector.

Each row:

FieldTypeLabelRequired
valuetextValueyes
labeltextLabelyes

Site output ​

pb-stats grid with value / label pairs.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "value": "1200+",
      "label": "Happy customers"
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilder_stats:

fenom
<section class="pb-section pb-section--stats pb-stats{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="stats"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-stats__inner">
    {if $title}
      <h2 class="pb-heading pb-stats__title">{$title|pb_text}</h2>
    {/if}
    <div class="pb-stats__grid">
      {foreach $items as $item}
        <div class="pb-stats__item">
          <div class="pb-stats__value">{$item.value|escape}</div>
          <div class="pb-stats__label">{$item.label|pb_text}</div>
        </div>
      {/foreach}
    </div>
  </div>
</section>

See also ​