docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Features

Features ​

A "why us" block: each item has an icon (URL or class), title, and body text. Richer than the Cards section.

Features

Информация

Requires PageBuilder Pro.

How Features beats cards ​

  • Icon, title, and body per cell
  • Stronger visual than Cards on product landings
  • Icon via URL or theme CSS class

Typical landings ​

  • Product landing: key capabilities
  • Alternatives without a comparison table
  • Block after hero on a SaaS site

Page examples ​

Features repeater ​

Features repeater: Icon, Title, Description. Icon can be an SVG/PNG URL or a theme CSS class.

Similar sections ​

Block parameters ​

ParameterValue
keyfeatures
LayerPro
Categorycontent (content)
Chunkpagebuilderpro_features
Requirespro

Inspector fields ​

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

Title (title) ​

Type text. Optional.

Features (items) ​

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

Each row:

FieldTypeLabelRequired
iconimageIconno
titletextTitleyes
texttextareaTextno

Site output ​

pb-features with icons and text.

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",
      "icon": {
        "url": "assets/images/example.jpg",
        "id": 12,
        "filename": "example.jpg",
        "extension": "jpg",
        "title": "example.jpg",
        "width": 1920,
        "height": 1080,
        "type": "image"
      },
      "title": "Section title",
      "text": "Supporting text under the title."
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilderpro_features:

fenom
<section class="pb-section pb-section--features pb-features{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="features"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-features__inner">
    {if $title}
      <h2 class="pb-heading pb-features__title">{$title|escape}</h2>
    {/if}
    <div class="pb-features__grid pb-grid pb-grid--cards">
      {foreach $items as $item}
        <article class="pb-features__item">
          {if $item.icon}
            {include 'pagebuilder_partial_image' image=$item.icon alt=$item.title class='pb-features__icon'}
          {/if}
          <h3 class="pb-features__item-title">{$item.title|escape}</h3>
          {if $item.text}
            <p class="pb-features__item-text">{$item.text|escape}</p>
          {/if}
        </article>
      {/foreach}
    </div>
  </div>
</section>

See also ​