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

Notice ​

Section notice shows a short message. Chunk: pagebuilderpro_notice. Requires PageBuilder Pro.

Notice

tone: info, success, warning, danger. The tone background sits on the text block (width: fit-content), not across the whole section.

Where it fits ​

  • A warning on a service page
  • A promotion status
  • A note above a form

Fields ​

FieldTypeRequiredPurpose
toneselectnoinfo, success, warning, danger
titletextnoTitle
texttextareayesText

Render ​

The root is <aside role="note">. The tone class is pb-notice--info, pb-notice--success, pb-notice--warning, or pb-notice--danger. An empty tone becomes info. The same tone is written to data-pb-tone. text is required. The title prints only when set.

Section data ​

json
{
  "tone": "warning",
  "title": "Warehouse",
  "text": "Shipping from 20 September"
}

Chunk template ​

Fenom chunk pagebuilderpro_notice:

fenom
{set $toneValue = $tone|default:'info'}
<aside class="pb-section pb-section--notice pb-notice pb-notice--{$toneValue|escape}{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="notice" data-pb-tone="{$toneValue|escape}"{if $id} id="pb-{$id|escape}"{/if} role="note">
  <div class="pb-section__inner">
    {if $title}<h2 class="pb-heading pb-notice__title">{$title|escape}</h2>{/if}
    <p class="pb-notice__text">{$text|escape}</p>
  </div>
</aside>

Similar sections ​