Cards

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

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

• Services: Hero → Cards → FAQ → CTA
• Process: Rich text → Cards → Testimonials

How to fill the repeater

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

Similar sections

• Features with icons (Pro)
• Pricing table when cards need prices

Block parameters

Parameter	Value
key	cards
Layer	Free
Category	content (content)
Chunk	pagebuilder_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:

Field	Type	Label	Required
title	text	Title	yes
text	textarea	Text	no

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:

{
  "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:

<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|escape}</h2>
    {/if}
    <div class="pb-cards__grid pb-grid pb-grid--cards">
      {foreach $items as $item}
        <article class="pb-cards__item">
          <h3 class="pb-cards__item-title">{$item.title|escape}</h3>
          {if $item.text}
            <p class="pb-cards__item-text">{$item.text|escape}</p>
          {/if}
        </article>
      {/foreach}
    </div>
  </div>
</section>

JSON definition

core/components/pagebuilder/sections/cards.json

See also

• Section catalog
• Fields overview
• Frontend output