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

Cards ​

A flexible grid: each card has a title and short text. No icons or buttons, just structured blocks.

Cards

When to use cards ​

  • Flexible grid without icons or prices
  • Works for services, steps, short points
  • Free layer, no Pro required

Scenarios ​

  • Services: three to six offerings
  • Process steps or roadmap
  • Simple benefits without the Pro Features icons

Page examples ​

How to fill the repeater ​

Cards repeater: Title and Text per row. Reorder rows in the inspector.

Similar sections ​

Block parameters ​

ParameterValue
keycards
LayerFree
Categorycontent (content)
Chunkpagebuilder_cards
Requires—

Inspector fields ​

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

Title (title) ​

Type text. Optional.

Cards (items) ​

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

Each row:

FieldTypeLabelRequired
titletextTitleyes
texttextareaTextno

Site output ​

pb-cards grid with title + text items.

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",
      "title": "Section title",
      "text": "Supporting text under the title."
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilder_cards:

fenom
{set $cardItems = is_array($items) ? $items : []}
{if count($cardItems) > 0}
<section class="pb-section pb-section--cards pb-cards{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="cards"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-cards__inner">
    {if $title}
      <h2 class="pb-heading pb-cards__title">{$title|pb_text}</h2>
    {/if}
    <div class="pb-cards__grid pb-grid pb-grid--cards">
      {foreach $cardItems as $item}
        <article class="pb-cards__item">
          <h3 class="pb-cards__item-title">{$item.title|pb_text}</h3>
          {if $item.text}
            <p class="pb-cards__item-text">{$item.text|pb_text}</p>
          {/if}
        </article>
      {/foreach}
    </div>
  </div>
</section>
{/if}

See also ​