Public Block Render Markup

This file answers the practical page-building question: "When I add this CMS block, which public HTML and WebBlocks UI classes are rendered?" Use it when composing pages manually, reviewing Page Converter output, or asking an AI assistant to build a CMS page from structured blocks.

Root-owning blocks render their own semantic public root and place data-wb-public-block-type on that root. Examples include Section, Container, Grid, Card, Hero, Gallery, and Navbar. Non-root-owning blocks render their inner markup and are normally wrapped by the slot renderer in .wb-public-block with data-wb-public-block-type. Examples include Plain Text, Rich Text, Button Link, Alert, and most navigation utility children.

This file is prepared from the real public renderer Blade sources. Example HTML is representative, but it must stay compatible with the renderer contract. The primary package renderer source is packages/webblocks-cms/resources/views/pages/partials/blocks/.blade.php; root compatibility files under resources/views/pages/partials/blocks/.blade.php generally delegate back to the package namespace. Block::publicRenderView() resolves package block partials first, then root compatibility partials, then the safe fallback/missing-renderer partial.

Recommended block composition for new pages

Prefer these blocks for new hand-built CMS pages:

Layout and rhythm: section, container, grid, cluster.
Page and section copy: content_header, header, plain_text, rich-text, button_link, button when it is a managed Hero/CTA action.
Marketing and structured content: hero, cta, columns with column_item, card with card_header, card_body, and card_footer, accordion with FAQ-style child rows, gallery, image.
Navigation and shared chrome: sticky-navbar, navbar-brand, navbar-navigation, header-actions, search-form, plus sidebar blocks for docs/sidebar layouts.

Do not prefer these for new hand-built pages unless you are preserving legacy content, converter output, or compatibility behavior: feature-grid, feature-item, card-grid, contact-info, faq-list, menu, metric-card, showcase-list, slider, stats, tabs, testimonial, text, callout, and fallback-only renderer paths.

Use Safe HTML (html) and fallback renderers only as reviewed fallbacks when the content cannot yet be represented by structured CMS blocks. They should not be the default output for migrated or AI-created pages.

Common page trees

Marketing page:

Page
└── main slot
    └── Section
        └── Container
            ├── Content Header or Hero
            ├── Grid or Columns
            └── CTA

Card grid:

Section
└── Container
    └── Grid
        └── Card
            ├── Card Header
            ├── Card Body
            └── Card Footer

Navbar / shared header:

Navbar
└── Container
    └── Cluster
        ├── Navbar Brand
        └── Cluster
            ├── Navbar Navigation
            └── Header Actions

FAQ:

Section
└── Container
    └── Accordion
        ├── FAQ child row
        ├── FAQ child row
        └── FAQ child row

The current Accordion renderer consumes published child rows with title and content as disclosure items. Page Converter writes adjacent <details> groups into faq child rows when both the accordion and faq contracts are available.

The default main slot wrapper renders non-root-owning blocks inside:

<div class="wb-public-block" data-wb-public-block-type="plain-text">
  ...
</div>

Root-owning blocks instead put data-wb-public-block-type on their own public root element.

Section (`section`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/section.blade.php

Rendered HTML

<section class="wb-section wb-section-lg wb-stack" data-wb-public-block-type="section">
  <!-- child blocks -->
</section>

Main CSS / WebBlocks UI classes

wb-section, spacing class from sectionSpacingClass(), wb-stack.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.spacing</td><td>sm</td><td><code>sectionSpacingClass()</code> adds <code>wb-section-sm</code>.</td></tr><tr><td>settings.spacing</td><td>lg</td><td><code>sectionSpacingClass()</code> adds <code>wb-section-lg</code>.</td></tr><tr><td>settings.spacing</td><td>default/empty</td><td>Uses only <code>wb-section wb-stack</code>.</td></tr><tr><td>status</td><td>unpublished</td><td>Block is not included by normal public block tree queries.</td></tr></tbody></table>

Use for / Avoid for

Use for: major page sections and block grouping.

Avoid for: putting visible text directly in Section settings; use child copy blocks.

Notes

The block owns its root <section>. It renders all child blocks through the normal block partial. It has no translatable text contract; visible content should be child blocks.

Container (`container`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/container.blade.php

Rendered HTML

<div class="wb-container wb-container-lg wb-stack" data-wb-public-block-type="container">
  <!-- child blocks -->
</div>

Main CSS / WebBlocks UI classes

wb-container, width class from containerWidthClass(), flow class from containerFlowClass().

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.width</td><td>sm/md/lg/xl/full</td><td><code>containerWidthClass()</code> adds <code>wb-container-sm</code>, <code>wb-container-md</code>, <code>wb-container-lg</code>, <code>wb-container-xl</code>, or <code>wb-container-full</code>.</td></tr><tr><td>settings.width</td><td>default/empty</td><td>Uses base <code>wb-container</code>.</td></tr><tr><td>settings.flow</td><td>stack/default</td><td><code>containerFlowClass()</code> adds <code>wb-stack</code>.</td></tr><tr><td>settings.flow</td><td>none</td><td>No flow class is added.</td></tr></tbody></table>

Use for / Avoid for

Use for: width control inside sections, navbars, and page shells.

Avoid for: using Container as a visual card or content surface.

Notes

The block owns its root <div>. It renders child blocks directly. Width and flow settings change classes.

Grid (`grid`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/grid.blade.php

Rendered HTML

<div class="wb-grid wb-grid-3 wb-gap-4" data-wb-public-block-type="grid">
  <!-- child blocks -->
</div>

Main CSS / WebBlocks UI classes

wb-grid, column class from gridColumnsClass(), gap class from gridGapClass().

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.columns</td><td>2</td><td><code>gridColumnsClass()</code> adds <code>wb-grid-2</code>.</td></tr><tr><td>settings.columns</td><td>4</td><td><code>gridColumnsClass()</code> adds <code>wb-grid-4</code>.</td></tr><tr><td>settings.columns</td><td>default/3/other</td><td><code>gridColumnsClass()</code> adds <code>wb-grid-3</code>.</td></tr><tr><td>settings.gap</td><td>3/4/6</td><td><code>gridGapClass()</code> adds <code>wb-gap-3</code>, <code>wb-gap-4</code>, or <code>wb-gap-6</code>.</td></tr><tr><td>settings.gap</td><td>default/empty</td><td>No gap class is added beyond <code>wb-grid</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: multi-column card, media, or content layouts.

Avoid for: simple button rows or navbar internals; use Cluster.

Notes

The block owns its root <div>. It renders child blocks directly. Column and gap settings change classes.

Cluster (`cluster`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/cluster.blade.php

Rendered HTML

<div class="wb-cluster wb-cluster-2 wb-cluster-between wb-cluster-center" data-wb-public-block-type="cluster">
  <!-- child blocks -->
</div>

Main CSS / WebBlocks UI classes

wb-cluster, plus classes from gap, justify, align, wrap, and width helpers.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.gap</td><td>none</td><td><code>clusterGapClass()</code> adds <code>wb-cms-cluster-gap-none</code>.</td></tr><tr><td>settings.gap</td><td>xs</td><td><code>clusterGapClass()</code> adds <code>wb-gap-1</code>.</td></tr><tr><td>settings.gap</td><td>sm or 2</td><td><code>clusterGapClass()</code> adds <code>wb-cluster-2</code>.</td></tr><tr><td>settings.gap</td><td>md or 4</td><td><code>clusterGapClass()</code> adds <code>wb-cluster-4</code>.</td></tr><tr><td>settings.gap</td><td>lg or 6</td><td><code>clusterGapClass()</code> adds <code>wb-cluster-6</code>.</td></tr><tr><td>settings.alignment</td><td>center/end/between</td><td><code>clusterAlignmentClass()</code> adds <code>wb-cluster-center</code>, <code>wb-cluster-end</code>, or <code>wb-cluster-between</code>.</td></tr><tr><td>settings.items_alignment</td><td>start/end/stretch</td><td><code>clusterAlignClass()</code> adds <code>wb-items-start</code>, <code>wb-items-end</code>, or <code>wb-cms-items-stretch</code>; <code>center</code> adds no class.</td></tr><tr><td>settings.wrap</td><td>nowrap</td><td><code>clusterWrapClass()</code> adds <code>wb-flex-nowrap</code>.</td></tr><tr><td>settings.width</td><td>full</td><td><code>clusterWidthClass()</code> adds <code>wb-w-full</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: horizontal composition, action rows, and navbar internals.

Avoid for: using Grid for a single horizontal row of small controls.

Notes

The block owns its root <div>. It renders child blocks directly. This is the normal horizontal composition primitive for buttons and navbar internals.

Content Header (`content_header`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/content_header.blade.php

Rendered HTML

<header class="wb-content-header wb-text-center" data-wb-public-block-type="content-header">
  <h1 class="wb-content-title">Page title</h1>
  <p class="wb-content-subtitle">Intro text</p>
  <div class="wb-content-meta">
    <span>Meta item</span>
    <span class="wb-content-meta-divider"></span>
    <span>Another item</span>
  </div>
</header>

Main CSS / WebBlocks UI classes

wb-content-header, optional alignment class, wb-content-title, wb-content-subtitle, wb-content-meta, wb-content-meta-divider.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.alignment</td><td>left/center/right</td><td><code>contentHeaderAlignmentClass()</code> adds <code>wb-text-left</code>, <code>wb-text-center</code>, or <code>wb-text-right</code>.</td></tr><tr><td>title</td><td>any text</td><td>Renders as <code><h1 class="wb-content-title"></code>.</td></tr><tr><td>subtitle</td><td>any text</td><td>Renders <code><p class="wb-content-subtitle"></code> when present.</td></tr><tr><td>meta</td><td>list</td><td>Renders <code>.wb-content-meta</code> spans separated by <code>.wb-content-meta-divider</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: page or major section intros with title, intro, and metadata.

Avoid for: nested card content or places where the heading should not be an H1.

Notes

The block owns its root <header>. It always renders the title as <h1>. It is not a container.

Hero (`hero`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/hero.blade.php

Rendered HTML

<section class="wb-card wb-promo wb-card-accent" data-wb-public-block-type="hero">
  <div class="wb-card-body wb-promo-copy wb-stack wb-gap-3 wb-text-center">
    <p class="wb-eyebrow">Eyebrow</p>
    <h1 class="wb-promo-title">Hero title</h1>
    <p class="wb-promo-text">Hero copy.</p>
    <div class="wb-promo-actions wb-cluster wb-cluster-2">
      <a href="/start" class="wb-btn wb-btn-primary">Start</a>
    </div>
  </div>
</section>

Main CSS / WebBlocks UI classes

wb-card, wb-promo, optional wb-card-muted or wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, optional wb-text-center, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>muted or soft</td><td>Adds <code>wb-card-muted</code> to the promo card.</td></tr><tr><td>variant</td><td>accent</td><td>Adds <code>wb-card-accent</code> to the promo card.</td></tr><tr><td>variant</td><td>default/other</td><td>Uses <code>wb-card wb-promo</code> without muted/accent modifier.</td></tr><tr><td>settings.layout</td><td>centered</td><td>Adds <code>wb-text-center</code> to <code>.wb-promo-copy</code>.</td></tr><tr><td>settings.title_tag</td><td>h1/h2/h3</td><td>Hero allows <code>h1</code>, <code>h2</code>, or <code>h3</code>; CTA renders its title as <code>h2</code>.</td></tr><tr><td>child button blocks</td><td>published with label and URL</td><td>Renders up to two managed <code>.wb-btn</code> actions through <code>_actions</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: top-of-page marketing introductions with managed CTA buttons.

Avoid for: general section grouping or arbitrary nested content.

Notes

The block owns its root promo <section>. It accepts only button child blocks for managed actions, and renders at most two published children with URL and label. settings.title_tag may change the heading element to h1, h2, or h3.

CTA (`cta`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/cta.blade.php

Rendered HTML

<section class="wb-card wb-promo wb-card-muted" data-wb-public-block-type="cta">
  <div class="wb-card-body wb-promo-copy wb-stack wb-gap-3">
    <p class="wb-eyebrow">Ready</p>
    <h2 class="wb-promo-title">Start now</h2>
    <p class="wb-promo-text">CTA body.</p>
    <div class="wb-promo-actions wb-cluster wb-cluster-2">
      <a href="/contact" class="wb-btn wb-btn-primary">Contact</a>
    </div>
  </div>
</section>

Main CSS / WebBlocks UI classes

wb-card, wb-promo, optional wb-card-muted or wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>muted or soft</td><td>Adds <code>wb-card-muted</code> to the promo card.</td></tr><tr><td>variant</td><td>accent</td><td>Adds <code>wb-card-accent</code> to the promo card.</td></tr><tr><td>variant</td><td>default/other</td><td>Uses <code>wb-card wb-promo</code> without muted/accent modifier.</td></tr><tr><td>settings.layout</td><td>centered</td><td>Adds <code>wb-text-center</code> to <code>.wb-promo-copy</code>.</td></tr><tr><td>settings.title_tag</td><td>h2 fixed in renderer</td><td>Hero allows <code>h1</code>, <code>h2</code>, or <code>h3</code>; CTA renders its title as <code>h2</code>.</td></tr><tr><td>child button blocks</td><td>published with label and URL</td><td>Renders up to two managed <code>.wb-btn</code> actions through <code>_actions</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: focused conversion sections with a short action row.

Avoid for: full page intros; use Hero or Content Header.

Notes

The block owns its root promo <section>. It accepts only button child blocks for managed actions, and renders at most two published children with URL and label.

Card (`card`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/card.blade.php

Rendered HTML

<article class="wb-card" data-wb-public-block-type="card">
  <div class="wb-card-header">...</div>
  <div class="wb-card-body">...</div>
  <div class="wb-card-footer">...</div>
</article>

Legacy no-region fallback:

<article class="wb-card" data-wb-public-block-type="card">
  <div class="wb-card-header">Subtitle</div>
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>Title</strong>
    <p class="wb-m-0">Description</p>
  </div>
  <div class="wb-card-footer">
    <a href="/target" class="wb-btn wb-btn-secondary">Action</a>
  </div>
</article>

Main CSS / WebBlocks UI classes

wb-card, wb-card-header, wb-card-body, wb-card-footer, optional wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.layout_name</td><td>any stored value</td><td>Admin/layout metadata only; no public class effect in the current renderer.</td></tr><tr><td>child blocks</td><td>published children</td><td>Rendered inside the card or region root.</td></tr><tr><td>legacy card fields</td><td>older Card rows without region children</td><td>Card parent can render a minimal legacy header/body/footer fallback.</td></tr></tbody></table>

Use for / Avoid for

Use for: framed repeated items with explicit Header, Body, and Footer children.

Avoid for: wrapping whole page sections or nesting cards inside cards.

Notes

The block owns its root <article>. Normal structure is child card_header, card_body, and card_footer region blocks. The fallback path only applies to older saved card rows without region children.

Card Header (`card_header`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/card_header.blade.php

Rendered HTML

<div class="wb-card-header" data-wb-public-block-type="card-header">
  <!-- child blocks -->
</div>

Main CSS / WebBlocks UI classes

wb-card-header.

Settings -> class / markup map

Use for / Avoid for

Use for: the header region inside Card.

Avoid for: placing outside Card.

Notes

The block owns its card-region root and renders child blocks. It is intended only under card.

Card Body (`card_body`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/card_body.blade.php

Rendered HTML

<div class="wb-card-body" data-wb-public-block-type="card-body">
  <!-- child blocks -->
</div>

Main CSS / WebBlocks UI classes

wb-card-body.

Settings -> class / markup map

Use for / Avoid for

Use for: the main content region inside Card.

Avoid for: placing outside Card.

Notes

The block owns its card-region root and renders child blocks. It is intended only under card.

Card Footer (`card_footer`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/card_footer.blade.php

Rendered HTML

<div class="wb-card-footer" data-wb-public-block-type="card-footer">
  <!-- child blocks -->
</div>

Main CSS / WebBlocks UI classes

wb-card-footer.

Settings -> class / markup map

Use for / Avoid for

Use for: actions or supporting footer content inside Card.

Avoid for: placing outside Card.

Notes

The block owns its card-region root and renders child blocks. It is intended only under card.

Header (`header`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/header.blade.php

Rendered HTML

<h2 class="wb-text-center" id="section-anchor" data-wb-public-block-type="header">Heading</h2>

Main CSS / WebBlocks UI classes

Optional alignment class from headerAlignmentClass().

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>h1-h6</td><td>Controls the heading element.</td></tr><tr><td>variant</td><td>empty/other</td><td>Defaults to <code><h2></code>.</td></tr><tr><td>settings.alignment</td><td>left/center/right</td><td><code>headerAlignmentClass()</code> adds <code>wb-text-left</code>, <code>wb-text-center</code>, or <code>wb-text-right</code>.</td></tr><tr><td>settings.anchor or legacy URL fallback</td><td>safe anchor string</td><td>Adds an <code>id</code> attribute for same-page links and TOC.</td></tr></tbody></table>

Use for / Avoid for

Use for: semantic headings inside page content.

Avoid for: page intros that need subtitle/meta; use Content Header.

Notes

The block owns the actual heading element (h1 through h6). variant controls the heading level, defaulting to h2. settings.anchor or legacy URL fallback can add id.

Plain Text (`plain_text`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/plain_text.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="plain-text">
  <p class="wb-text-center">Plain copy.</p>
</div>

Main CSS / WebBlocks UI classes

Optional alignment class from plainTextAlignmentClass(). The generic wrapper uses wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.alignment</td><td>left/center/right</td><td><code>plainTextAlignmentClass()</code> adds <code>wb-text-left</code>, <code>wb-text-center</code>, or <code>wb-text-right</code> to <code><p></code>.</td></tr><tr><td>content</td><td>text</td><td>Escaped into a single paragraph.</td></tr><tr><td>status</td><td>unpublished</td><td>Block is not included by normal public block tree queries.</td></tr></tbody></table>

Use for / Avoid for

Use for: short unformatted copy.

Avoid for: formatted paragraphs, lists, links, or headings; use Rich Text/Header.

Notes

The block does not own its public root according to Block::ownsPublicRoot(), so normal slot rendering wraps it. The renderer itself emits only <p>.

Rich Text (`rich-text`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/rich-text.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="rich-text">
  <div class="wb-rich-text wb-rich-text-readable">
    <p>Safe <strong>formatted</strong> copy.</p>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-rich-text, wb-rich-text-readable, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>content</td><td>safe rich HTML</td><td><code>SafeRichTextRenderer</code> outputs sanitized content inside <code>wb-rich-text wb-rich-text-readable</code>.</td></tr><tr><td>content</td><td>empty after sanitization</td><td>Renderer emits nothing.</td></tr><tr><td>unsupported HTML/classes</td><td>present in content</td><td>Stripped by the safe renderer rather than mapped to public classes.</td></tr></tbody></table>

Use for / Avoid for

Use for: body copy with safe inline formatting, links, and simple lists.

Avoid for: headings, media, tables, buttons, or raw layout markup.

Notes

The renderer emits nothing when sanitized content is empty. It does not own the slot-level root. Content is rendered through SafeRichTextRenderer.

Button Link (`button_link`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/button_link.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="button-link">
  <a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>

Main CSS / WebBlocks UI classes

Class from buttonLinkVariantClass(), usually wb-btn plus a variant class.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>secondary</td><td><code>buttonLinkVariantClass()</code> outputs <code>wb-btn wb-btn-secondary</code>.</td></tr><tr><td>variant</td><td>default/other</td><td><code>buttonLinkVariantClass()</code> outputs <code>wb-btn wb-btn-primary</code>.</td></tr><tr><td>settings.url</td><td>safe URL</td><td>Renders the anchor <code>href</code>; unsafe/empty URL renders nothing.</td></tr><tr><td>settings.target</td><td>_blank</td><td>Adds <code>target="_blank" rel="noopener noreferrer"</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: standalone editorial links styled as buttons.

Avoid for: managed Hero/CTA actions where the button child contract is expected.

Notes

The renderer emits nothing without a safe URL. _blank target adds target="_blank" and rel="noopener noreferrer". It normally receives the generic public block wrapper unless nested in a root-owning parent.

Image (`image`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/image.blade.php

Rendered HTML

<figure class="wb-stack wb-gap-2" data-wb-public-block-type="image">
  <a href="/target">
    <img src="/media/photo.jpg" alt="Alt text" width="1200" height="800">
  </a>
  <figcaption>Caption</figcaption>
</figure>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>media_id</td><td>selected media</td><td>Renders <code><figure></code> with <code><img></code> using media URL and dimensions.</td></tr><tr><td>url</td><td>safe URL</td><td>Wraps only the image in an anchor.</td></tr><tr><td>caption</td><td>translated text</td><td>Renders <code><figcaption></code> when present.</td></tr><tr><td>alt text</td><td>translated or media fallback</td><td>Renders the image <code>alt</code> attribute.</td></tr></tbody></table>

Use for / Avoid for

Use for: single semantic images with optional caption/link.

Avoid for: image collections; use Gallery.

Notes

The block owns its <figure> root and emits nothing without media. Optional link wraps only the image when the URL is safe (http, https, /, #, mailto, or tel).

Gallery (`gallery`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/gallery.blade.php

Rendered HTML

<div class="wb-gallery wb-gallery--grid wb-gallery--cols-3 wb-gallery--gap-4 wb-gallery--aspect-16-9"
  data-wb-public-block-type="gallery"
  data-wb-gallery-variant="grid"
  data-wb-gallery-captions="below"
  aria-label="Gallery">
  <div class="wb-gallery-grid">
    <figure class="wb-gallery-item">
      <a href="/media/full.jpg" class="wb-gallery-trigger" data-wb-gallery-target="#wb-gallery-viewer-10">
        <img src="/media/thumb.jpg" alt="Alt" class="wb-gallery-media">
      </a>
      <figcaption class="wb-gallery-caption">Caption</figcaption>
    </figure>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-gallery, wb-gallery--{variant}, wb-gallery--cols-{n}, wb-gallery--gap-{n}, wb-gallery--aspect-{ratio}, wb-gallery-grid, wb-gallery-item, wb-gallery-trigger or wb-gallery-link, wb-gallery-media, wb-gallery-caption, wb-gallery-caption-title, wb-gallery-caption-meta.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.variant</td><td>grid/masonry/masonary/collage</td><td><code>galleryVariant()</code> adds <code>wb-gallery--grid</code>, <code>wb-gallery--masonry</code>, or <code>wb-gallery--collage</code>; <code>masonary</code> normalizes to <code>masonry</code>.</td></tr><tr><td>settings.columns</td><td>2/3/4/5</td><td><code>galleryColumns()</code> adds <code>wb-gallery--cols-{n}</code>; default is <code>3</code>.</td></tr><tr><td>settings.gap</td><td>none/sm/md/lg</td><td><code>galleryGap()</code> adds <code>wb-gallery--gap-{value}</code>; default is <code>md</code>.</td></tr><tr><td>settings.aspect_ratio</td><td>auto/square/4:3/16:9/portrait</td><td><code>galleryAspectRatio()</code> adds <code>wb-gallery--aspect-{value}</code> with <code>:</code> rendered as <code>-</code>.</td></tr><tr><td>settings.captions_mode</td><td>hidden/below/overlay/on-hover</td><td>Controls below captions or overlay caption markup; default is <code>below</code>.</td></tr><tr><td>settings.overlay_mode</td><td>none/gradient/solid</td><td>Controls overlay caption modifier; default is <code>gradient</code>.</td></tr><tr><td>settings.lightbox_enabled</td><td>true/default</td><td>Uses <code>.wb-gallery-trigger</code> and registers <code>gallery-viewer</code> in <code>PublicOverlayRegistry</code>.</td></tr><tr><td>settings.lightbox_enabled</td><td>false</td><td>Uses <code>.wb-gallery-link</code> and no viewer modal.</td></tr></tbody></table>

Use for / Avoid for

Use for: structured image collections with captions and optional lightbox.

Avoid for: section intro copy; place Content Header/Rich Text before Gallery.

Notes

The block owns its gallery root and registers gallery-viewer HTML in PublicOverlayRegistry when lightbox is enabled. Variants, columns, gap, aspect ratio, captions, overlay mode, and lightbox settings change attributes/classes. Legacy settings-based items remain readable.

Columns (`columns`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/columns.blade.php

Rendered HTML

<section class="wb-stack wb-gap-4" data-wb-public-block-type="columns">
  <div class="wb-stack wb-gap-1">
    <h2>Columns title</h2>
    <p class="wb-text-muted">Subtitle</p>
  </div>
  <div class="wb-stack wb-gap-2">
    <p class="wb-m-0">Intro copy.</p>
  </div>
  <div class="wb-grid wb-grid-3">
    <!-- column_item or feature-item output -->
  </div>
</section>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-4, wb-gap-1, wb-text-muted, wb-gap-2, wb-m-0, wb-grid, wb-grid-2, wb-grid-3, wb-grid-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>cards</td><td>Child items render card-style.</td></tr><tr><td>variant</td><td>stats</td><td>Child items render stat-style.</td></tr><tr><td>variant</td><td>plain/default</td><td>Child items render plain stack-style.</td></tr><tr><td>child count</td><td>1</td><td>Uses <code>wb-stack wb-gap-3</code> for the item layout.</td></tr><tr><td>child count</td><td>2/3/4+</td><td>Uses <code>wb-grid wb-grid-2</code>, <code>wb-grid-3</code>, or <code>wb-grid-4</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: structured feature, stat, or simple column groups.

Avoid for: arbitrary layout grids where Grid + Card is clearer.

Notes

The block owns its root <section>. Child count controls grid class: one child uses wb-stack wb-gap-3, two uses wb-grid wb-grid-2, three uses wb-grid wb-grid-3, otherwise wb-grid wb-grid-4. variant is passed to child column_item/feature-item renderers.

Column Item (`column_item`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/column_item.blade.php

Rendered HTML

Cards variant:

<div class="wb-card">
  <div class="wb-card-body wb-stack wb-gap-2">
    <a href="/item" class="wb-no-decoration">
      <div class="wb-stack wb-gap-2">
        <strong>Title</strong>
        <p class="wb-m-0">Copy.</p>
      </div>
    </a>
  </div>
</div>

Plain variant:

<div class="wb-stack wb-gap-2">
  <strong>Title</strong>
  <p class="wb-m-0">Copy.</p>
</div>

Stats variant:

<div class="wb-stat">
  <div class="wb-stat-label">Label</div>
  <div class="wb-stat-value">Value</div>
  <div class="wb-stat-delta">Detail</div>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-card-body, wb-stack, wb-gap-2, wb-no-decoration, wb-m-0, wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>parent columns variant</td><td>cards</td><td>Renders <code>.wb-card > .wb-card-body</code>.</td></tr><tr><td>parent columns variant</td><td>stats</td><td>Renders <code>.wb-stat</code> with label/value/detail.</td></tr><tr><td>parent columns variant</td><td>plain/default</td><td>Renders <code>.wb-stack wb-gap-2</code>.</td></tr><tr><td>url</td><td>safe URL</td><td>Cards/plain variants wrap content in <code>a.wb-no-decoration</code>; stats do not render a link in current renderer.</td></tr></tbody></table>

Use for / Avoid for

Use for: children of Columns.

Avoid for: standalone page content; use Card or Stat Card when independent.

Notes

This renderer changes substantially based on the parent columns variant. It does not own a slot-level root and is normally rendered by the parent.

Feature Grid (`feature-grid`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/feature-grid.blade.php

Rendered HTML

<section class="wb-stack wb-gap-4" data-wb-public-block-type="feature-grid">
  <div class="wb-grid wb-grid-3">
    <div class="wb-card">...</div>
  </div>
</section>

Main CSS / WebBlocks UI classes

Delegates to Columns: wb-stack, wb-gap-4, wb-grid, wb-card, and related column_item classes.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>renderer behavior</td><td>delegated alias</td><td>Delegates to an existing renderer path; exact setting map follows the delegate where visible.</td></tr><tr><td>preferred new pages</td><td>n/a</td><td>Prefer the canonical block named in Notes instead of this alias/compatibility block.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy feature-grid content that already exists.

Avoid for: new hand-built pages; use Columns with Column Item or Grid with Card.

Notes

The renderer replicates the block, filters children to feature-item and legacy-compatible column_item, forces variant = cards, and includes the Columns renderer. It does not own public root according to the helper, so top-level rendering may add wb-public-block.

Feature Item (`feature-item`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/feature-item.blade.php

Rendered HTML

<div class="wb-card">
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>Feature title</strong>
    <p class="wb-m-0">Feature copy.</p>
  </div>
</div>

Main CSS / WebBlocks UI classes

Delegates to Column Item cards variant: wb-card, wb-card-body, wb-stack, wb-gap-2, wb-m-0.

Settings -> class / markup map

Use for / Avoid for

Use for: legacy Feature Grid children.

Avoid for: new standalone feature cards; use Card regions or Column Item.

Notes

This renderer includes column_item with columnsVariant = cards. It is intended as a child of feature-grid.

Accordion (`accordion`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/accordion.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="accordion">
  <div class="wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <h3>Questions</h3>
      <p>Intro copy.</p>
    </div>
    <div class="wb-stack-2">
      <details>
        <summary>Question?</summary>
        <div>Answer.</div>
      </details>
    </div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-3, wb-gap-1, wb-stack-2, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>title/subtitle</td><td>present</td><td>Renders intro heading/copy above items.</td></tr><tr><td>child rows</td><td>published with title and content</td><td>Renders each as <code><details><summary>...</code> disclosure item.</td></tr><tr><td>child rows</td><td>missing title or content</td><td>Skipped by current item collection.</td></tr><tr><td>wrapper</td><td>top-level non-root block</td><td>Receives generic <code>.wb-public-block</code> wrapper from slot renderer.</td></tr></tbody></table>

Use for / Avoid for

Use for: FAQ/disclosure groups.

Avoid for: single Q/A cards; use FAQ only for compatibility child rows.

Notes

The block renders child rows as accordion items when each child has title and content. It does not own the slot-level root. Page Converter writes details items to faq rows when the contract is available, and accordion consumes child title/content.

FAQ (`faq`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/faq.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="faq">
  <section class="wb-card wb-card-muted">
    <div class="wb-card-body wb-stack wb-gap-2">
      <strong>Question?</strong>
      <p class="wb-m-0">Answer.</p>
    </div>
  </section>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>title/content</td><td>present</td><td>Renders one muted card with question and answer.</td></tr><tr><td>children</td><td>published children</td><td>Renders an additional <code>wb-stack wb-gap-4</code> child block area.</td></tr><tr><td>accordion child usage</td><td>inside Accordion</td><td>Accordion consumes FAQ row title/content as disclosure item content.</td></tr></tbody></table>

Use for / Avoid for

Use for: accordion item child rows and legacy single Q/A cards.

Avoid for: new standalone FAQ sections; use Accordion as the parent.

Notes

FAQ is a single Q/A card renderer. If children exist, it also renders them in an additional wb-stack wb-gap-4 block.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sticky-navbar.blade.php

Rendered HTML

<nav class="wb-navbar wb-navbar--static" data-wb-public-block-type="sticky-navbar">
  <!-- navbar child blocks -->
</nav>

Main CSS / WebBlocks UI classes

wb-navbar, optional class from navbarPositionClass() such as wb-navbar--static.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.sticky_mode</td><td>sticky/default</td><td>Uses only base <code>wb-navbar</code> for sticky behavior.</td></tr><tr><td>settings.sticky_mode</td><td>static</td><td><code>navbarPositionClass()</code> adds <code>wb-navbar--static</code>.</td></tr><tr><td>settings.sticky_mode</td><td>fixed</td><td><code>navbarPositionClass()</code> adds <code>wb-fixed</code>.</td></tr><tr><td>child blocks</td><td>published allowed children</td><td>Rendered directly inside <code><nav class="wb-navbar..."></code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: shared public header/navigation block trees.

Avoid for: creating a separate custom header shell around navbar markup.

Notes

The block label is Navbar, but the persisted slug and renderer file are sticky-navbar. It owns its outer <nav> root and renders child blocks. Allowed child types include container, cluster, header, plain_text, rich-text, button_link, navbar-brand, navbar-navigation, header-actions, and search-form.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-brand.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="navbar-brand">
  <a href="/" class="wb-navbar-brand">
    <img src="/media/logo.svg" alt="Site name">
    <span class="wb-navbar-identity">
      <span>Site name</span>
      <span class="wb-navbar-brand-note">Tagline</span>
    </span>
  </a>
</div>

Main CSS / WebBlocks UI classes

wb-navbar-brand, wb-navbar-identity, wb-navbar-brand-note, plus generic wb-public-block unless nested in a root-owning parent.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.url</td><td>safe URL</td><td>Saved URL wins for the brand link.</td></tr><tr><td>settings.url</td><td>empty</td><td>Falls back to site home path, then <code>/</code>.</td></tr><tr><td>settings.target</td><td>_blank</td><td>Adds <code>target="_blank" rel="noopener noreferrer"</code>.</td></tr><tr><td>settings.aria_label</td><td>text</td><td>Used as accessible label when no visible text is rendered.</td></tr><tr><td>media_id</td><td>logo media</td><td>Renders brand image inside <code>wb-navbar-brand</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: site identity inside Navbar.

Avoid for: full header layouts; compose with Navbar/Container/Cluster.

Notes

The block does not own the outer navbar shell. Saved URL wins, then site home path, then /. Logo-only output uses aria-label when no text copy is rendered.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-navigation.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="navbar-navigation">
  <div class="wb-cms-navbar-navigation">
    <div class="wb-dropdown wb-dropdown-end wb-cms-navbar-mobile-toggle">
      <button class="wb-navbar-toggle wb-cms-navbar-mobile-toggle-button" data-wb-toggle="dropdown">
        <i class="wb-icon wb-icon-menu" aria-hidden="true"></i>
      </button>
      <div class="wb-dropdown-menu wb-cms-navbar-mobile-menu">
        <ul class="wb-navbar-nav wb-cms-navbar-mobile-nav">...</ul>
      </div>
    </div>
    <div class="wb-navbar-links">
      <ul class="wb-navbar-nav">
        <li class="wb-navbar-nav-item">
          <a href="/" class="wb-navbar-link is-active" aria-current="page">Home</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Dropdown group variant:

<li class="wb-navbar-nav-item wb-dropdown">
  <button class="wb-navbar-link" data-wb-toggle="dropdown" data-wb-target="#navbar-navigation-group-1-2">
    Group <i class="wb-icon wb-icon-chevron-down" aria-hidden="true"></i>
  </button>
  <div class="wb-dropdown-menu" id="navbar-navigation-group-1-2">
    <a class="wb-dropdown-item" href="/child">Child</a>
  </div>
</li>

Main CSS / WebBlocks UI classes

wb-cms-navbar-navigation, wb-dropdown, wb-dropdown-end, wb-cms-navbar-mobile-toggle, wb-navbar-toggle, wb-cms-navbar-mobile-toggle-button, wb-icon, wb-icon-menu, wb-dropdown-menu, wb-cms-navbar-mobile-menu, wb-navbar-nav, wb-cms-navbar-mobile-nav, wb-navbar-links, wb-navbar-nav-item, wb-navbar-link, wb-dropdown-item, is-active.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.menu_key</td><td>known NavigationItem menu key</td><td>Selects the CMS navigation tree to render.</td></tr><tr><td>title</td><td>text</td><td>Used as shared ARIA label when present.</td></tr><tr><td>navigation group item</td><td>group with children</td><td>Renders WebBlocks UI dropdown trigger and <code>.wb-dropdown-menu</code>.</td></tr><tr><td>active item</td><td>current page match</td><td>Adds <code>is-active</code> and <code>aria-current="page"</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: CMS-managed menu links inside Navbar.

Avoid for: manual button rows; use Button Link or Cluster.

Notes

The actual core slug is navbar-navigation. It renders CMS NavigationItem trees from the selected menu key. It does not own the outer navbar shell. It uses WebBlocks UI dropdown hooks for group menus and the mobile menu.

Header Actions (`header-actions`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/header-actions.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="header-actions">
  <div class="wb-cluster wb-cluster-2 wb-cluster-end" data-wb-header-actions>
    <div class="wb-topbar-actions">
      <a class="wb-topbar-action" data-wb-public-search-open>
        <i class="wb-icon wb-icon-search" aria-hidden="true"></i>
      </a>
      <button class="wb-topbar-action" data-wb-mode-cycle>
        <i class="wb-icon wb-icon-sun-moon" aria-hidden="true"></i>
      </button>
      <div class="wb-dropdown wb-dropdown-end">
        <button class="wb-topbar-action" data-wb-toggle="dropdown">
          <i class="wb-icon wb-icon-palette" aria-hidden="true"></i>
        </button>
        <div class="wb-dropdown-menu">...</div>
      </div>
    </div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-cluster, wb-cluster-2, wb-cluster-end, wb-topbar-actions, wb-topbar-action, wb-icon, wb-icon-search, wb-icon-sun-moon, wb-icon-palette, wb-dropdown, wb-dropdown-end, wb-dropdown-menu, wb-dropdown-item, wb-dropdown-label, wb-dropdown-divider.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.show_search</td><td>false</td><td>Hides public search action.</td></tr><tr><td>settings.show_mode_toggle</td><td>false</td><td>Hides mode toggle action.</td></tr><tr><td>settings.show_accent_toggle</td><td>false</td><td>Hides accent/theme dropdown.</td></tr><tr><td>default settings</td><td>empty/true</td><td>Renders all actions.</td></tr></tbody></table>

Use for / Avoid for

Use for: standard search/theme utilities in headers.

Avoid for: custom business CTAs; use Button Link/Button.

Notes

Settings can hide the search, mode toggle, or accent/theme menu. This block does not own a slot-level root. It uses WebBlocks UI dropdown hooks and CMS public search hooks.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/search-form.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="search-form">
  <form action="/search" method="GET" role="search" class="wb-cluster wb-cluster-2">
    <div class="wb-stack wb-gap-1 wb-flex-1">
      <label for="search-form-1">Search</label>
      <input id="search-form-1" type="search" name="q" class="wb-input" placeholder="Search this site">
    </div>
    <button type="submit" class="wb-btn wb-btn-primary">Search</button>
  </form>
</div>

Main CSS / WebBlocks UI classes

wb-cluster, wb-cluster-2, wb-stack, wb-gap-1, wb-flex-1, wb-input, wb-btn, wb-btn-primary or wb-btn-secondary.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>secondary</td><td>Submit button uses <code>wb-btn wb-btn-secondary</code>.</td></tr><tr><td>variant</td><td>primary/default</td><td>Submit button uses <code>wb-btn wb-btn-primary</code>.</td></tr><tr><td>settings.show_button</td><td>false</td><td>Omits submit button.</td></tr><tr><td>search route unavailable</td><td>n/a</td><td>Renderer emits nothing.</td></tr></tbody></table>

Use for / Avoid for

Use for: site search forms.

Avoid for: filter forms or custom external search integrations.

Notes

The renderer emits nothing if the route resolver cannot produce a search path. settings.show_button controls whether the submit button renders.

Stat Card (`stat-card`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/stat-card.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="stat-card">
  <div class="wb-stat">
    <div class="wb-stat-label">Label</div>
    <div class="wb-stat-value">Value</div>
    <div class="wb-stat-detail">Detail</div>
    <div class="wb-stat-detail"><a href="/more" class="wb-link">Learn more</a></div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-stat, wb-stat-label, wb-stat-value, wb-stat-detail, wb-link, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>subtitle</td><td>text</td><td>Renders <code>.wb-stat-label</code>.</td></tr><tr><td>title</td><td>text</td><td>Renders <code>.wb-stat-value</code>.</td></tr><tr><td>content</td><td>text</td><td>Renders <code>.wb-stat-detail</code>.</td></tr><tr><td>url</td><td>safe URL</td><td>Adds <code>Learn more</code> link with <code>.wb-link</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: standalone metric cards.

Avoid for: multi-metric groups where Columns stats is more compact.

Notes

This is a non-root-owning content block. It uses subtitle as label, title as value, content as detail, and optional canonical URL for a Learn more link.

Code (`code`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/code.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="code">
  <pre><code data-language="php">php artisan test</code></pre>
</div>

Main CSS / WebBlocks UI classes

No WebBlocks UI class is emitted by the code renderer itself. The generic wrapper uses wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.language</td><td>text</td><td>Sanitized into <code>data-language</code> on <code><code></code>.</td></tr><tr><td>settings.lang</td><td>text</td><td>Legacy fallback for <code>data-language</code>.</td></tr><tr><td>content</td><td>empty</td><td>Renderer emits nothing.</td></tr></tbody></table>

Use for / Avoid for

Use for: code snippets.

Avoid for: formatted prose or command lists; use Rich Text/List as appropriate.

Notes

The renderer returns early when content is empty. settings.language or settings.lang becomes a sanitized data-language value.

Download (`download`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/download.blade.php

Rendered HTML

<div class="wb-stack wb-gap-2" data-wb-public-block-type="download">
  <a href="/media/file.pdf" class="wb-btn wb-btn-secondary" download>Download file</a>
  <p>Helper copy.</p>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-ghost.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>primary</td><td>Button class is <code>wb-btn wb-btn-primary</code>.</td></tr><tr><td>variant</td><td>ghost</td><td>Button class is <code>wb-btn wb-btn-ghost</code>.</td></tr><tr><td>variant</td><td>secondary/default/other</td><td>Button class is <code>wb-btn wb-btn-secondary</code>.</td></tr><tr><td>media_id</td><td>download media</td><td>Media URL is used; no media means renderer emits nothing.</td></tr><tr><td>subtitle</td><td>text</td><td>Renders helper <code><p></code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: media-backed download CTAs.

Avoid for: external file cards; use File when no media asset exists.

Notes

The block owns its root <div>. It emits only when downloadAsset() has a URL. variant changes the button class.

File (`file`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/file.blade.php

Rendered HTML

<div class="wb-card wb-card-muted" data-wb-public-block-type="file">
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>File title</strong>
    <p class="wb-m-0">Description.</p>
    <a href="/media/file.pdf" class="wb-btn wb-btn-secondary" download>Download</a>
    <span class="wb-text-sm wb-text-muted">file.pdf | application/pdf</span>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, wb-text-sm, wb-text-muted.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>media_id</td><td>selected media</td><td>Media URL wins over external URL.</td></tr><tr><td>url</td><td>safe external URL</td><td>Used only when no media URL is available.</td></tr><tr><td>title/content</td><td>text</td><td>Rendered as visible card copy when present.</td></tr><tr><td>source unavailable</td><td>n/a</td><td>Renderer emits nothing or no playable control depending on source availability.</td></tr></tbody></table>

Use for / Avoid for

Use for: file cards with media or reviewed external URL fallback.

Avoid for: simple media downloads where Download is enough.

Notes

The block owns its root card. Media URL wins over a safe external http, https, or mailto URL. The button label is Download for media and Open file for external URL.

Video (`video`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/video.blade.php

Rendered HTML

<div class="wb-card wb-card-muted" data-wb-public-block-type="video">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <strong>Video title</strong>
      <p class="wb-m-0">Video copy.</p>
    </div>
    <video controls preload="metadata">
      <source src="/media/video.mp4">
    </video>
  </div>
</div>

Embed variant:

<iframe src="https://www.youtube.com/embed/abc123" title="Video title" loading="lazy" allowfullscreen></iframe>

Main CSS / WebBlocks UI classes

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-m-0, wb-btn, wb-btn-secondary.

Settings -> class / markup map

Use for / Avoid for

Use for: uploaded video or safe YouTube/Vimeo embeds.

Avoid for: arbitrary iframe HTML; use Trusted HTML only as reviewed fallback.

Notes

The block owns its root card. Uploaded media renders native <video>. Safe YouTube and Vimeo URLs render iframe embeds. Other safe HTTP URLs render an Open video button.

Audio (`audio`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/audio.blade.php

Rendered HTML

<div class="wb-card wb-card-muted" data-wb-public-block-type="audio">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <strong>Audio title</strong>
      <p class="wb-m-0">Audio copy.</p>
    </div>
    <audio controls preload="metadata">
      <source src="/media/audio.mp3">
    </audio>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-m-0.

Settings -> class / markup map

Use for / Avoid for

Use for: uploaded or safe external audio media.

Avoid for: podcast/player embeds that need unsupported markup; review Trusted HTML fallback.

Notes

The block owns its root card. Uploaded media URL wins over a safe external HTTP URL.

Table (`table`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/table.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="table">
  <div class="wb-stack wb-gap-2">
    <h3>Table title</h3>
    <div class="wb-table-wrap">
      <table class="wb-table">
        <thead>
          <tr><th>Name</th><th>Value</th></tr>
        </thead>
        <tbody>
          <tr><td>One</td><td>Two</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, wb-table-wrap, wb-table, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>plain</td><td>No header row; all rows render in <code><tbody></code>.</td></tr><tr><td>variant</td><td>default/other</td><td>First row renders in <code><thead></code>.</td></tr><tr><td>settings.rows</td><td>array</td><td>Legacy rows source wins when present.</td></tr><tr><td>content</td><td>pipe-delimited lines</td><td>Used as row source when <code>settings.rows</code> is empty.</td></tr></tbody></table>

Use for / Avoid for

Use for: simple structured tables.

Avoid for: layout grids or complex interactive data tables.

Notes

Rows come from legacy settings.rows when present, otherwise pipe-delimited translated content lines. variant = plain disables header-row behavior.

Quote (`quote`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/quote.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="quote">
  <blockquote class="wb-stack wb-gap-2">
    <p class="wb-m-0">Quote text.</p>
    <footer>Name | Role</footer>
  </blockquote>
</div>

Testimonial variant:

<div class="wb-card wb-card-muted">
  <div class="wb-card-body">
    <blockquote class="wb-stack wb-gap-2">...</blockquote>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, wb-m-0, optional wb-card, wb-card-muted, wb-card-body, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>testimonial</td><td>Wraps blockquote in <code>wb-card wb-card-muted > .wb-card-body</code>.</td></tr><tr><td>variant</td><td>default/other</td><td>Renders plain <code><blockquote class="wb-stack wb-gap-2"></code>.</td></tr><tr><td>subtitle</td><td>text</td><td>Renders in <code><footer></code> with title/content context.</td></tr></tbody></table>

Use for / Avoid for

Use for: quotations and testimonials.

Avoid for: generic callouts or cards.

Notes

The renderer itself does not add data-wb-public-block-type; top-level slot rendering provides the generic wrapper.

Link List (`link-list`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/link-list.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="link-list">
  <div class="wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <div class="wb-link-list-meta">Meta</div>
      <h2>Links</h2>
      <p>Description.</p>
    </div>
    <div class="wb-link-list">
      <a href="/item" class="wb-link-list-item">...</a>
    </div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-3, wb-gap-1, wb-link-list, wb-link-list-meta.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>title/subtitle/content</td><td>text</td><td>Renders optional intro stack above links.</td></tr><tr><td>child link-list-item</td><td>published children</td><td>Renders children inside <code>.wb-link-list</code>.</td></tr><tr><td>no children</td><td>n/a</td><td>Renderer has no link rows to display.</td></tr></tbody></table>

Use for / Avoid for

Use for: structured lists of links.

Avoid for: full navigation menus; use Navbar/Navigation Auto as appropriate.

Notes

The block renders published link-list-item children only. It does not own the slot-level root.

Link List Item (`link-list-item`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/link-list-item.blade.php

Rendered HTML

<a href="/item" class="wb-link-list-item">
  <div class="wb-link-list-main">
    <span class="wb-link-list-title">Title</span>
    <span class="wb-link-list-meta">Meta</span>
  </div>
  <div class="wb-link-list-desc">Description.</div>
</a>

Main CSS / WebBlocks UI classes

wb-link-list-item, wb-link-list-main, wb-link-list-title, wb-link-list-meta, wb-link-list-desc.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>url</td><td>safe URL</td><td>Required for output; becomes anchor <code>href</code>.</td></tr><tr><td>title</td><td>text</td><td>Required for output; renders <code>.wb-link-list-title</code>.</td></tr><tr><td>subtitle</td><td>text</td><td>Renders <code>.wb-link-list-meta</code>.</td></tr><tr><td>content</td><td>text</td><td>Renders <code>.wb-link-list-desc</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: children of Link List.

Avoid for: standalone buttons or nav menu items.

Notes

The renderer emits only when both a safe URL and title exist. It is intended as a child of link-list.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/navigation-auto.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="navigation-auto">
  <nav class="wb-stack wb-gap-2" aria-label="main navigation" data-wb-menu-key="main">
    <ul class="wb-cluster wb-cluster-2 wb-cluster-between">
      <li class="wb-stack wb-gap-1">
        <a href="/" class="wb-btn wb-btn-secondary">Home</a>
      </li>
    </ul>
  </nav>
</div>

Footer/legal menu variant:

<ul class="wb-stack wb-gap-1">
  <li class="wb-stack wb-gap-1"><a href="/privacy" class="wb-link">Privacy</a></li>
</ul>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, wb-gap-1, wb-cluster, wb-cluster-2, wb-cluster-between, wb-btn, wb-btn-secondary, wb-link, wb-text-sm.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.menu_key or settings.location</td><td>known menu key</td><td>Selects CMS Navigation menu; helper falls back to primary/footer based on slot/subtitle.</td></tr><tr><td>footer/legal menu</td><td>footer or legal key</td><td>Renders stacked <code>.wb-link</code> list.</td></tr><tr><td>other menu</td><td>primary/default</td><td>Renders clustered button-style root links.</td></tr><tr><td>active item</td><td>current page match</td><td>Adds current/active classes where renderer resolves them.</td></tr></tbody></table>

Use for / Avoid for

Use for: compatibility rendering of CMS menus.

Avoid for: new shared headers where Navbar Navigation is the intended child.

Notes

The renderer resolves a CMS Navigation menu by key. Footer and legal menus render stacked links; other menus render clustered button-style root links.

TOC (`toc`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/toc.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="toc">
  <div class="wb-stack wb-gap-2">
    <strong>Contents</strong>
    <div class="wb-link-list">
      <a class="wb-link-list-item" href="#intro">
        <div class="wb-link-list-main">
          <span class="wb-link-list-title">Intro</span>
        </div>
        <div class="wb-link-list-desc">Jump to section</div>
      </a>
    </div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, wb-link-list, wb-link-list-item, wb-link-list-main, wb-link-list-title, wb-link-list-meta, wb-link-list-desc.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>title</td><td>text</td><td>Renders heading label; default visible label is current renderer behavior.</td></tr><tr><td>same-page Header blocks</td><td>published with anchors</td><td>Generates <code>.wb-link-list-item</code> links.</td></tr><tr><td>header variant</td><td>h3</td><td>Description says <code>Jump to subsection</code>; others say <code>Jump to section</code>.</td></tr><tr><td>no eligible headings</td><td>n/a</td><td>Renderer emits nothing.</td></tr></tbody></table>

Use for / Avoid for

Use for: same-page contents lists from anchored Header blocks.

Avoid for: manual link lists; use Link List.

Notes

The renderer reads anchored published Header blocks from the same page tree. It emits nothing when no eligible headings exist.

Alert (`alert`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/alert.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="alert">
  <div class="wb-alert wb-alert-info">
    <h3 class="wb-alert-title">Notice</h3>
    <p>Message.</p>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-alert, variant class from alertVariantClass(), wb-alert-title, plus generic wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.variant</td><td>success/warning/danger</td><td><code>alertVariantClass()</code> adds <code>wb-alert-success</code>, <code>wb-alert-warning</code>, or <code>wb-alert-danger</code>.</td></tr><tr><td>settings.variant</td><td>info/default/other</td><td>Adds <code>wb-alert-info</code>.</td></tr><tr><td>title</td><td>text</td><td>Renders <code>.wb-alert-title</code>.</td></tr><tr><td>content</td><td>text</td><td>Renders alert body.</td></tr></tbody></table>

Use for / Avoid for

Use for: inline user-facing notices.

Avoid for: marketing promos; use CTA/Hero.

Notes

The block does not own the slot-level root. The shared variant controls the alert tone class.

Contact Form (`contact_form`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/contact_form.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="contact-form">
  <section class="wb-card wb-public-contact-form-card" id="contact-form-1">
    <div class="wb-card-body wb-stack wb-gap-4">
      <div class="wb-stack wb-gap-2">
        <h2>Contact</h2>
        <p>Intro copy.</p>
      </div>
      <form method="POST" action="/contact-messages" class="wb-stack wb-gap-3">
        <input type="hidden" name="_token" value="csrf-token">
        <input type="hidden" name="block_id" value="1">
        <input type="hidden" name="page_id" value="10">
        <input type="hidden" name="source_url" value="/contact">
        <input type="hidden" name="submitted_at" value="1770000000">
        <input type="hidden" name="_form_check_name" value="signed-generated-field-name">
        <div class="wb-form-check" inert aria-hidden="true">
          <label for="contact-form-check-1">Leave this field empty</label>
          <input id="contact-form-check-1" type="text" name="form_check_generatedtoken" tabindex="-1" autocomplete="off">
        </div>
        <div class="wb-grid wb-grid-2">
          <div class="wb-stack wb-gap-1">
            <label class="wb-label">Name</label>
            <input class="wb-input" required>
          </div>
          <div class="wb-stack wb-gap-1">
            <label class="wb-label">Email</label>
            <input class="wb-input" type="email" required>
          </div>
        </div>
        <textarea class="wb-textarea" rows="7" required></textarea>
        <div class="wb-cluster wb-cluster-between wb-cluster-2">
          <span class="wb-text-sm wb-text-muted">Your message is stored first...</span>
          <button class="wb-btn wb-btn-primary">Send message</button>
        </div>
      </form>
    </div>
  </section>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-public-contact-form-card, wb-card-body, wb-stack, wb-gap-4, wb-gap-3, wb-gap-2, wb-gap-1, wb-alert, wb-alert-danger, wb-alert-title, wb-grid, wb-grid-2, wb-label, wb-input, wb-textarea, wb-cluster, wb-cluster-between, wb-cluster-2, wb-text-sm, wb-text-muted, wb-btn, wb-btn-primary.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>site contact recipient</td><td>configured</td><td>Form posts to <code>contact-messages.store</code> with hidden site/page context.</td></tr><tr><td>validation errors</td><td>present</td><td>Renders <code>wb-alert wb-alert-danger</code> and field-level feedback.</td></tr><tr><td>settings submit/success labels</td><td>legacy translated settings</td><td>Moved out by translation resolver/writer; visible output follows current translated block fields.</td></tr></tbody></table>

The public form is native Blade output, not Trusted HTML content. Browser submissions require CSRF, include the CMS-owned hidden generated anti-spam check field, validate required fields server-side, store legitimate messages first, and then attempt email notification using the documented recipient fallback order. The check field is generated by the renderer and is not part of normal visitor input.

Use for / Avoid for

Use for: the product-owned contact message workflow.

Avoid for: raw HTML forms or third-party embeds unless reviewed as Trusted HTML.

Notes

The renderer includes hidden fields, CSRF, .wb-form-check anti-spam markup with inert and aria-hidden="true", targeted validation errors, and posts to contact-messages.store. The old website field is no longer the public renderer contract.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/breadcrumb.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="breadcrumb">
  <nav class="wb-breadcrumb" aria-label="Breadcrumb">
    <ol class="wb-breadcrumb-list">
      <li class="wb-breadcrumb-item">
        <a class="wb-breadcrumb-link" href="/">Home</a>
      </li>
      <li class="wb-breadcrumb-item">
        <span class="wb-breadcrumb-current" aria-current="page">Current page</span>
      </li>
    </ol>
  </nav>
</div>

Main CSS / WebBlocks UI classes

wb-breadcrumb, wb-breadcrumb-list, wb-breadcrumb-item, wb-breadcrumb-link, wb-breadcrumb-current.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.home_label</td><td>text</td><td>Overrides home crumb label.</td></tr><tr><td>settings.include_current</td><td>false</td><td>Omits current page crumb.</td></tr><tr><td>settings.include_current</td><td>true/default</td><td>Includes current page crumb.</td></tr><tr><td>home page</td><td>include_current true</td><td>Renders only current crumb.</td></tr></tbody></table>

Use for / Avoid for

Use for: hierarchical page navigation.

Avoid for: primary site navigation.

Notes

Home label and current-page inclusion are settings-driven. On the home page it renders only the current crumb when include_current is true.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-brand.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="sidebar-brand">
  <a href="/" class="wb-sidebar-brand">
    <img src="/media/logo.svg" alt="Docs" class="wb-sidebar-brand-logo">
    <span class="wb-sidebar-brand-copy">
      <span>Docs</span>
      <span class="wb-sidebar-brand-note">Guide</span>
    </span>
  </a>
</div>

Main CSS / WebBlocks UI classes

wb-sidebar-brand, wb-sidebar-brand-logo, wb-sidebar-brand-copy, wb-sidebar-brand-note.

Settings -> class / markup map

Use for / Avoid for

Use for: site/docs identity inside sidebar layouts.

Avoid for: navbar identity; use Navbar Brand there.

Notes

The block does not own the sidebar shell. Saved URL wins, then site home path, then /. Logo-only output uses aria-label.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="sidebar-navigation">
  <nav class="wb-sidebar-nav" aria-label="Documentation navigation">
    <div class="wb-sidebar-section">
      <a href="/docs" class="wb-sidebar-link is-active" aria-current="page">
        <i class="wb-icon wb-icon-book wb-sidebar-icon" aria-hidden="true"></i>
        <span>Docs</span>
      </a>
    </div>
  </nav>
</div>

Main CSS / WebBlocks UI classes

wb-sidebar-nav, wb-sidebar-section, wb-sidebar-link, wb-nav-group, wb-nav-group-toggle, wb-nav-group-items, wb-nav-group-item, wb-icon, wb-sidebar-icon, is-active.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.menu_key</td><td>known menu key</td><td>Renders CMS Navigation tree when present.</td></tr><tr><td>manual children</td><td>sidebar-nav-item/sidebar-nav-group</td><td>Renders manual child blocks when menu mode does not supply items.</td></tr><tr><td>settings.show_icons</td><td>boolean</td><td>Icon visibility effect needs source confirmation.</td></tr><tr><td>settings.active_matching</td><td>value</td><td>Active matching behavior is helper-driven; visible output is <code>is-active</code>/<code>aria-current</code> when matched.</td></tr></tbody></table>

Use for / Avoid for

Use for: docs/sidebar navigation blocks.

Avoid for: ordinary marketing sidebars without nav semantics.

Notes

The block can render a CMS Navigation menu or manual child sidebar-nav-item / sidebar-nav-group blocks. It does not own the outer page/sidebar shell.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item.blade.php

Rendered HTML

<a href="/docs/page" class="wb-sidebar-link is-active" aria-current="page">
  <i class="wb-icon wb-icon-file wb-sidebar-icon" aria-hidden="true"></i>
  <span>Page</span>
</a>

Nested group item:

<a href="/docs/child" class="wb-nav-group-item">
  <span>Child</span>
</a>

Main CSS / WebBlocks UI classes

wb-sidebar-link, wb-nav-group-item, wb-icon, wb-sidebar-icon, is-active.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.url</td><td>safe URL</td><td>Required for output.</td></tr><tr><td>settings.target</td><td>_blank</td><td>Adds external target/rel attributes.</td></tr><tr><td>settings.icon</td><td>icon slug/class</td><td>Renders <code>wb-icon ... wb-sidebar-icon</code> when configured.</td></tr><tr><td>settings.active_mode</td><td>exact/current-page/manual/default</td><td>Controls active-state helper; visible output is <code>is-active</code> and <code>aria-current</code>.</td></tr><tr><td>settings.manual_active</td><td>true</td><td>Can force active output when active mode is manual.</td></tr></tbody></table>

Use for / Avoid for

Use for: manual sidebar links.

Avoid for: navbar links or generic buttons.

Notes

The renderer delegates to sidebar-nav-item-link.blade.php. It emits nothing without both a URL and label.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-group.blade.php

Rendered HTML

<div class="wb-nav-group is-open" data-wb-nav-group>
  <button type="button" class="wb-nav-group-toggle is-active" data-wb-nav-group-toggle>
    <span class="wb-nav-group-icon"><i class="wb-icon wb-icon-folder" aria-hidden="true"></i></span>
    <span class="wb-nav-group-label">Group</span>
    <span class="wb-nav-group-arrow" aria-hidden="true"></span>
  </button>
  <div class="wb-nav-group-items" id="wb-nav-group-items-1">
    <a href="/docs/child" class="wb-nav-group-item">...</a>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-nav-group, is-open, wb-nav-group-toggle, is-active, wb-nav-group-icon, wb-icon, wb-nav-group-label, wb-nav-group-arrow, wb-nav-group-items, wb-nav-group-item.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.icon</td><td>icon slug/class</td><td>Renders group icon markup when configured.</td></tr><tr><td>settings.initially_open</td><td>true/default</td><td>Adds <code>is-open</code>.</td></tr><tr><td>settings.initially_open</td><td>false</td><td>Group starts closed.</td></tr><tr><td>child sidebar-nav-item</td><td>published children</td><td>Rendered inside <code>.wb-nav-group-items</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: collapsible groups inside Sidebar Navigation.

Avoid for: general accordions; use Accordion.

Notes

The group renders only when it has a label and published sidebar-nav-item children. It uses WebBlocks UI nav-group hooks.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-footer.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="sidebar-footer">
  <div class="wb-sidebar-footer">
    <div class="wb-callout wb-callout-info">
      <div class="wb-callout-title">Title</div>
      <p>Copy.</p>
    </div>
    <p class="wb-text-xs wb-text-muted wb-mt-3 wb-mb-0">Footer note.</p>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-sidebar-footer, wb-callout, variant class from sidebarFooterVariantClass(), wb-callout-title, wb-text-xs, wb-text-muted, wb-mt-3, wb-mb-0.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.variant</td><td>success/warning/danger</td><td><code>sidebarFooterVariantClass()</code> adds <code>wb-callout-success</code>, <code>wb-callout-warning</code>, or <code>wb-callout-danger</code>.</td></tr><tr><td>settings.variant</td><td>info/default/other</td><td>Adds <code>wb-callout-info</code>.</td></tr><tr><td>title/content/subtitle</td><td>all empty</td><td>Renderer emits nothing.</td></tr><tr><td>subtitle</td><td>text</td><td>Renders footer note with <code>wb-text-xs wb-text-muted wb-mt-3 wb-mb-0</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: small sidebar notes or calls to action.

Avoid for: main page CTAs.

Notes

The block renders only when title/content/subtitle exists. It does not own the sidebar shell.

HTML (Trusted) (`html`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/html.blade.php

Rendered HTML

<div class="wb-public-block" data-wb-public-block-type="html">
  <div>
    <!-- trusted HTML content -->
  </div>
</div>

Main CSS / WebBlocks UI classes

No fixed WebBlocks UI class is added by the renderer itself. The generic wrapper uses wb-public-block.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>content</td><td>trusted HTML</td><td>Rendered inside a plain <code><div></code> within the generic public wrapper.</td></tr><tr><td>overlay/body-end fragments</td><td>recognized by extractor</td><td>Can be hoisted through <code>TrustedHtmlOverlayExtractor</code>, <code>PublicOverlayRegistry</code>, and <code>PublicBodyEndRegistry</code>.</td></tr><tr><td>untrusted content</td><td>n/a</td><td>Do not use; this renderer assumes trusted static markup.</td></tr></tbody></table>

Use for / Avoid for

Use for: reviewed fallback markup that structured blocks cannot yet represent.

Avoid for: default migrated/AI-created page output.

Notes

Trusted HTML can extract overlay and body-end fragments through TrustedHtmlOverlayExtractor, PublicOverlayRegistry, and PublicBodyEndRegistry. Use this only for trusted static markup.

Button (`button`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/button.blade.php

Rendered HTML

<a href="/start" class="wb-btn wb-btn-primary">Open link</a>

No URL variant:

<button type="button" class="wb-btn wb-btn-primary">Open link</button>

Main CSS / WebBlocks UI classes

wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-outline, wb-btn-ghost, wb-btn-danger, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>primary/secondary/outline/ghost/danger</td><td>Maps to <code>wb-btn</code> plus corresponding variant class.</td></tr><tr><td>variant</td><td>empty/other</td><td>Defaults to <code>wb-btn wb-btn-primary</code>.</td></tr><tr><td>attachment media URL</td><td>present</td><td>Wins over canonical URL for compatibility.</td></tr><tr><td>url</td><td>present without attachment</td><td>Renders anchor.</td></tr><tr><td>url</td><td>empty</td><td>Renders inert <code><button type="button"></code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: managed child actions in Hero/CTA.

Avoid for: standalone page buttons; use Button Link.

Notes

This is a managed child action block for Hero/CTA. It is not in the current published catalog list from CoreBlockTypeCatalogSyncer, but public renderers and conversion support exist. Attachment URL wins over canonical URL for compatibility.

Callout (`callout`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/callout.blade.php

Rendered HTML

<div class="wb-alert wb-alert-info">
  <div>
    <div class="wb-alert-title">Title</div>
    <div>Content</div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-alert, wb-alert-info, wb-alert-success, wb-alert-warning, wb-alert-danger, wb-alert-title, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>success/warning/danger</td><td>Adds matching <code>wb-alert-{tone}</code> class.</td></tr><tr><td>variant</td><td>info/default/other</td><td>Adds <code>wb-alert-info</code>.</td></tr><tr><td>children</td><td>published children</td><td>Rendered afterward in <code>wb-stack wb-gap-4</code>.</td></tr><tr><td>preferred new pages</td><td>n/a</td><td>Use Alert for first-class new-page notices.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy/converter-compatible alert-like content.

Avoid for: new structured pages; use Alert.

Notes

callout is a legacy/conversion-compatible renderer and maps visually to the alert pattern. It is not listed as a current published core catalog row, while alert is.

List (`list`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/list.blade.php

Rendered HTML

<div class="wb-stack wb-gap-2">
  <h3>List title</h3>
  <ul class="wb-stack wb-gap-1">
    <li>Item</li>
  </ul>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, wb-gap-1, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>variant</td><td>ordered</td><td>Renders <code><ol></code>.</td></tr><tr><td>variant</td><td>default/other</td><td>Renders <code><ul></code>.</td></tr><tr><td>settings.items/cards/entries</td><td>array</td><td>Used as item source when available.</td></tr><tr><td>content</td><td>line-separated text</td><td>Used as fallback item source.</td></tr><tr><td>title</td><td>text</td><td>Renders heading above list.</td></tr></tbody></table>

Use for / Avoid for

Use for: simple imported or manually entered lists.

Avoid for: navigation lists or rich body copy that belongs in Rich Text.

Notes

This renderer exists for compatibility and conversion. Items come from settings (items, cards, entries) or line-separated content. variant = ordered switches ul to ol.

Text (`text`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/text.blade.php

Rendered HTML

<div class="wb-stack wb-gap-2">
  <strong>Title</strong>
  <p>Content</p>
</div>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-2, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>title</td><td>text</td><td>Renders <code><strong></code> above the paragraph when present.</td></tr><tr><td>content</td><td>text</td><td>Renders a paragraph inside <code>wb-stack wb-gap-2</code>.</td></tr><tr><td>children</td><td>published children</td><td>Renders child blocks afterward inside <code>wb-stack wb-gap-4</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a compatibility renderer. The current canonical plain body-copy core block is plain_text.

Internal Actions Partial (`_actions`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/_actions.blade.php

Rendered HTML

<div class="wb-cluster wb-cluster-2">
  <a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>

Main CSS / WebBlocks UI classes

Default wrapper wb-cluster wb-cluster-2, or a caller-provided wrapper class.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>buttons input</td><td>child blocks with type <code>button</code></td><td>Filters to button children only and renders them.</td></tr><tr><td>wrapperClass input</td><td>provided class string</td><td>Uses the provided wrapper class.</td></tr><tr><td>wrapperClass input</td><td>empty</td><td>Defaults to <code>wb-cluster wb-cluster-2</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: renderer-owned Hero/CTA action output.

Avoid for: direct page composition.

Notes

This is an internal helper partial, not a standalone published block. It filters the provided collection to button children and renders each child through the normal block partial.

Card Grid (`card-grid`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/card-grid.blade.php

Rendered HTML

<section class="wb-stack wb-gap-4">
  <div class="wb-stack wb-gap-1">
    <h2>Cards</h2>
    <p class="wb-text-muted">Intro</p>
  </div>
  <div class="wb-grid wb-grid-3">
    <div class="wb-card">
      <div class="wb-card-body wb-stack wb-gap-2">
        <img src="/media/card.jpg" alt="Card image">
        <strong>Card title</strong>
        <p class="wb-m-0">Card content.</p>
        <a href="/target" class="wb-link">Read more</a>
      </div>
    </div>
  </div>
</section>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-4, wb-gap-1, wb-text-muted, wb-grid, wb-grid-2, wb-grid-3, wb-grid-4, wb-card, wb-card-body, wb-gap-2, wb-m-0, wb-link.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.items</td><td>array</td><td>Drives card output; each item may include <code>asset_id</code>, <code>title</code>, <code>content</code>, <code>url</code>, and <code>url_label</code>.</td></tr><tr><td>settings.items count</td><td>0-1/2/3/4+</td><td>Uses <code>wb-stack wb-gap-3</code>, <code>wb-grid wb-grid-2</code>, <code>wb-grid wb-grid-3</code>, or <code>wb-grid wb-grid-4</code>.</td></tr><tr><td>item.asset_id</td><td>media id</td><td>Renders item image when media URL exists.</td></tr><tr><td>item.url + item.url_label</td><td>text</td><td>Renders <code>a.wb-link</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a legacy/compatibility renderer backed by settings.items. The grid class changes by item count.

Contact Info (`contact-info`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/contact-info.blade.php

Rendered HTML

<section class="wb-card wb-card-muted wb-public-contact-card">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <h2>Contact</h2>
      <p>Reach us.</p>
    </div>
    <div class="wb-stack wb-gap-1 wb-public-contact-meta">
      <strong>Email</strong>
      <a href="mailto:hello@example.test" class="wb-link">hello@example.test</a>
    </div>
  </div>
</section>

Main CSS / WebBlocks UI classes

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-link, plus CMS-specific wb-public-contact-card and wb-public-contact-meta.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.items</td><td>array</td><td>Renders contact rows inside <code>wb-public-contact-meta</code>.</td></tr><tr><td>item.url</td><td>safe URL</td><td>Renders linked value with <code>wb-link</code>.</td></tr><tr><td>item.target</td><td>_blank</td><td>Adds external target/rel attributes.</td></tr><tr><td>item.label/value</td><td>text</td><td>Renders label and plain value when no safe URL exists.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a legacy/compatibility renderer backed by settings.items. Links are passed through Block::safePublicUrl().

FAQ List (`faq-list`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/faq-list.blade.php

Rendered HTML

<div class="wb-stack wb-gap-3">
  <details class="wb-card">
    <summary class="wb-card-header"><strong>Question?</strong></summary>
    <div class="wb-card-body">Answer.</div>
  </details>
</div>

Main CSS / WebBlocks UI classes

Uses the accordion renderer classes.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>renderer behavior</td><td>delegated</td><td>Includes the Accordion renderer directly.</td></tr><tr><td>child rows</td><td>title and content</td><td>Follow the Accordion disclosure item contract.</td></tr><tr><td>preferred new pages</td><td>n/a</td><td>Use <code>accordion</code> as the canonical parent block.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This compatibility partial delegates directly to accordion.blade.php.

Gallery Viewer (`gallery-viewer`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/gallery-viewer.blade.php

Rendered HTML

<div class="wb-modal wb-modal-xl" id="wb-gallery-viewer-1" role="dialog" aria-modal="true">
  <div class="wb-modal-dialog">
    <div class="wb-modal-body">
      <div class="wb-gallery-viewer">
        <div class="wb-gallery-viewer-toolbar">
          <button class="wb-btn wb-btn-secondary wb-btn-icon wb-gallery-viewer-prev" type="button"></button>
          <div class="wb-gallery-viewer-counter" aria-live="polite">1 / 3</div>
        </div>
        <figure class="wb-gallery-viewer-media">
          <img class="wb-gallery-viewer-image" src="/media/full.jpg" alt="Image">
          <figcaption class="wb-gallery-viewer-caption">Caption</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-modal, wb-modal-xl, wb-modal-dialog, wb-modal-body, wb-gallery-viewer, wb-gallery-viewer-toolbar, wb-btn, wb-btn-secondary, wb-btn-icon, wb-icon, wb-gallery-viewer-counter, wb-gallery-viewer-media, wb-gallery-viewer-image, wb-gallery-viewer-caption, wb-gallery-viewer-meta, wb-text-sm, wb-text-muted, wb-m-0.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>viewerId input</td><td>id string</td><td>Sets the modal/gallery target id used by gallery triggers.</td></tr><tr><td>galleryItems input</td><td>collection</td><td>Renders viewer slides/items from Gallery-prepared item data.</td></tr><tr><td>direct block settings</td><td>n/a</td><td>Internal partial; no standalone block settings map.</td></tr></tbody></table>

Use for / Avoid for

Use for: Gallery lightbox overlay markup registered by Gallery.

Avoid for: manual use as a page block.

Notes

This is an overlay helper used by gallery/showcase renderers through PublicOverlayRegistry, not a standalone block.

Map (`map`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/map.blade.php

Rendered HTML

<div class="wb-card wb-card-muted">
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>Location</strong>
    <p class="wb-m-0">Address text</p>
    <a href="https://maps.google.com/?q=Address" class="wb-btn wb-btn-secondary" target="_blank" rel="noopener noreferrer">Open map</a>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>url</td><td>http/https URL</td><td>Accepted as a safe map source and displayed when distinct from content.</td></tr><tr><td>content</td><td>text or query</td><td>Used as map query fallback.</td></tr><tr><td>title</td><td>text</td><td>Renders <code><strong></code> in the card.</td></tr><tr><td>children</td><td>published children</td><td>Renders child blocks afterward inside <code>wb-stack wb-gap-4</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a legacy/compatibility renderer. It accepts only http and https URL schemes for the raw URL and can render children after the card.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/menu.blade.php

Rendered HTML

<nav class="wb-stack wb-gap-2" aria-label="Menu">
  <ul class="wb-cluster wb-cluster-2 wb-cluster-between">
    <li><a href="/page" class="wb-btn wb-btn-secondary">Page</a></li>
  </ul>
</nav>

Main CSS / WebBlocks UI classes

Uses the navigation-auto renderer classes.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>renderer behavior</td><td>delegated</td><td>Includes the Navigation Auto renderer directly.</td></tr><tr><td>settings.menu_key/location</td><td>known menu key</td><td>Follows Navigation Auto menu selection behavior.</td></tr><tr><td>preferred new pages</td><td>n/a</td><td>Use Navbar Navigation or Navigation Auto intentionally, not <code>menu</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This compatibility partial delegates directly to navigation-auto.blade.php.

Metric Card (`metric-card`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/metric-card.blade.php

Rendered HTML

<div class="wb-stat">
  <div class="wb-stat-label">Label</div>
  <div class="wb-stat-value">42</div>
  <div class="wb-stat-delta">+8%</div>
</div>

Main CSS / WebBlocks UI classes

wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

Use for / Avoid for

Use for: legacy metric-card alias content.

Avoid for: new content; use Stat Card or Columns stats.

Notes

This is a legacy/compatibility metric renderer. The current published catalog uses stat-card.

Showcase List (`showcase-list`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/showcase-list.blade.php

Rendered HTML

<section class="wb-stack wb-gap-6">
  <div class="wb-stack wb-gap-1">
    <h2>Projects</h2>
    <p>Selected work.</p>
  </div>
  <article class="wb-card wb-card-muted wb-public-showcase-item">
    <div class="wb-card-body wb-stack wb-gap-4">
      <div class="wb-stack wb-gap-1">
        <h3>Project</h3>
        <p>Summary.</p>
      </div>
      <section class="wb-gallery" aria-label="Project screenshots">
        <div class="wb-gallery-grid">
          <figure class="wb-gallery-item">
            <a href="/media/full.jpg" class="wb-gallery-trigger" data-wb-gallery-target="#wb-gallery-viewer-1">
              <img src="/media/full.jpg" alt="Project image" class="wb-gallery-media">
            </a>
            <figcaption class="wb-gallery-caption">Screenshot</figcaption>
          </figure>
        </div>
      </section>
      <a href="/project" class="wb-link">View project</a>
    </div>
  </article>
</section>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-6, wb-gap-1, wb-card, wb-card-muted, wb-card-body, wb-gap-4, wb-gallery, wb-gallery-grid, wb-gallery-item, wb-gallery-trigger, wb-gallery-media, wb-gallery-caption, wb-link, plus CMS-specific wb-public-showcase-item.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.items</td><td>array</td><td>Renders one muted card showcase item per entry.</td></tr><tr><td>item.images[].asset_id</td><td>media id</td><td>Renders gallery figures and registers a shared gallery viewer when images exist.</td></tr><tr><td>item.url</td><td>safe URL</td><td>Renders external <code>wb-link</code> with target/rel.</td></tr><tr><td>item.title/subtitle/url_label</td><td>text</td><td>Renders showcase headings and link label.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a legacy/compatibility renderer backed by settings.items. It can push gallery-viewer overlay markup into PublicOverlayRegistry.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item-link.blade.php

Rendered HTML

<a href="/docs" class="wb-sidebar-link is-active" aria-current="page">
  <i class="wb-icon wb-icon-book-open wb-sidebar-icon" aria-hidden="true"></i>
  <span>Docs</span>
</a>

Main CSS / WebBlocks UI classes

wb-sidebar-link, wb-nav-group-item, is-active, wb-icon, wb-sidebar-icon.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>nested input</td><td>true</td><td>Uses <code>wb-nav-group-item</code>.</td></tr><tr><td>nested input</td><td>false</td><td>Uses <code>wb-sidebar-link</code>.</td></tr><tr><td>sidebar item URL/label</td><td>present</td><td>Required for anchor output.</td></tr><tr><td>item icon</td><td>configured</td><td>Renders <code>i.wb-icon.wb-icon-{icon}.wb-sidebar-icon</code>.</td></tr><tr><td>active helper</td><td>true</td><td>Adds <code>is-active</code> and <code>aria-current="page"</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: internal sidebar link output shared by sidebar item renderers.

Avoid for: direct page composition.

Notes

This is an internal helper for sidebar-nav-item and sidebar-nav-group. The class switches to wb-nav-group-item when rendered nested.

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation-menu-item.blade.php

Rendered HTML

<div class="wb-nav-group is-open" data-wb-nav-group>
  <button type="button" class="wb-nav-group-toggle is-active" aria-expanded="true" data-wb-nav-group-toggle>
    <span class="wb-nav-group-icon"><i class="wb-icon wb-icon-folder" aria-hidden="true"></i></span>
    <span class="wb-nav-group-label">Group</span>
    <span class="wb-nav-group-arrow" aria-hidden="true"></span>
  </button>
  <div class="wb-nav-group-items">
    <a href="/child" class="wb-nav-group-item">Child</a>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-nav-group, is-open, wb-nav-group-toggle, is-active, wb-nav-group-icon, wb-icon, wb-nav-group-label, wb-nav-group-arrow, wb-nav-group-items, wb-nav-group-item, wb-sidebar-link, wb-sidebar-icon.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>NavigationItem link_type</td><td>group with visible children</td><td>Renders <code>.wb-nav-group</code> with toggle and nested items.</td></tr><tr><td>nested input</td><td>true</td><td>Child links use <code>wb-nav-group-item</code>.</td></tr><tr><td>showIcons input</td><td>true</td><td>Allows item sidebar icons to render.</td></tr><tr><td>active helper</td><td>true</td><td>Adds <code>is-open</code>/<code>is-active</code> and <code>aria-current</code> where applicable.</td></tr></tbody></table>

Use for / Avoid for

Use for: internal CMS menu item rendering for sidebar navigation.

Avoid for: direct page composition.

Notes

This helper renders CMS NavigationItem rows for sidebar-navigation when that block is menu-backed rather than manual-child-backed.

Slider (`slider`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/slider.blade.php

Rendered HTML

<section class="wb-stack wb-gap-3">
  <h3>Slider</h3>
  <div class="wb-slider wb-card wb-card-muted" data-wb-slider>
    <div class="wb-slider-track" data-wb-slider-track>
      <article class="wb-slider-slide" data-wb-slider-slide>
        <div class="wb-card-body wb-stack wb-gap-3">
          <img src="/media/slide.jpg" alt="Slide">
          <div class="wb-stack wb-gap-1">
            <strong>Slide title</strong>
            <p>Caption.</p>
          </div>
        </div>
      </article>
    </div>
    <div class="wb-card-body wb-slider-controls">
      <button type="button" class="wb-btn wb-btn-secondary" data-wb-slider-prev>Previous</button>
      <div class="wb-slider-dots" role="tablist">
        <button type="button" class="wb-slider-dot is-active" data-wb-slider-dot></button>
      </div>
      <button type="button" class="wb-btn wb-btn-secondary" data-wb-slider-next>Next</button>
    </div>
  </div>
  <p class="wb-text-sm wb-text-muted">Caption</p>
</section>

Main CSS / WebBlocks UI classes

wb-stack, wb-gap-3, wb-slider, wb-card, wb-card-muted, wb-slider-track, wb-slider-slide, wb-card-body, wb-gap-1, wb-slider-controls, wb-btn, wb-btn-secondary, wb-slider-dots, wb-slider-dot, is-active, wb-text-sm, wb-text-muted.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>gallery media</td><td>one or more assets</td><td>Renders slides from <code>galleryAssets()</code>.</td></tr><tr><td>gallery media count</td><td>more than one</td><td>Renders previous/next controls and dots.</td></tr><tr><td>title</td><td>text</td><td>Renders <code><h3></code> above slider.</td></tr><tr><td>subtitle</td><td>text</td><td>Renders muted helper text below slider.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a legacy/compatibility renderer backed by galleryAssets(). Slider controls render only when more than one slide asset is present.

Stats (`stats`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/stats.blade.php

Rendered HTML

<section class="wb-stack wb-gap-4">
  <div class="wb-grid wb-grid-3">
    <div class="wb-stat">
      <div class="wb-stat-label">Metric</div>
      <div class="wb-stat-value">42</div>
    </div>
  </div>
</section>

Main CSS / WebBlocks UI classes

Uses the columns renderer with variant = stats, including wb-stat, wb-stat-label, wb-stat-value, and wb-stat-delta for child column_item blocks.

Settings -> class / markup map

Use for / Avoid for

Use for: legacy stats alias content.

Avoid for: new stats groups; use Columns with stats variant or Stat Card.

Notes

This compatibility partial delegates to columns.blade.php after forcing the variant to stats.

Tabs (`tabs`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/tabs.blade.php

Rendered HTML

<div class="wb-card">
  <div class="wb-card-header">
    <strong>Tab</strong>
    <span>Subtitle</span>
  </div>
  <div class="wb-card-body">
    <div>Content</div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-card, wb-card-header, wb-card-body, optional child wrapper wb-stack wb-gap-4.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>title</td><td>text/default</td><td>Renders card header title, defaulting to <code>Tab</code>.</td></tr><tr><td>subtitle</td><td>text</td><td>Renders secondary header span.</td></tr><tr><td>content</td><td>text/HTML text</td><td>Renders inside <code>.wb-card-body</code>.</td></tr><tr><td>children</td><td>published children</td><td>Renders child blocks afterward inside <code>wb-stack wb-gap-4</code>.</td></tr></tbody></table>

Use for / Avoid for

Use for: legacy or converter-compatible content that already depends on this renderer.

Avoid for: new hand-built pages; use the canonical structured blocks listed near the top.

Notes

This is a legacy/compatibility renderer. It renders children after the card if child blocks exist.

Testimonial (`testimonial`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/testimonial.blade.php

Rendered HTML

<blockquote class="wb-card wb-card-muted">
  <div class="wb-card-body wb-stack wb-gap-2">
    <p class="wb-m-0">Quote text.</p>
    <footer class="wb-text-sm wb-text-muted">Name</footer>
  </div>
</blockquote>

Main CSS / WebBlocks UI classes

Uses the quote renderer with variant = testimonial.

Settings -> class / markup map

Use for / Avoid for

Use for: legacy testimonial alias content.

Avoid for: new quotes; use Quote with testimonial variant if needed.

Notes

This compatibility partial delegates to quote.blade.php after forcing the variant to testimonial.

Fallback Renderer (`fallback`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/fallback.blade.php

Rendered HTML

<section class="wb-card wb-card-muted">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <h3>Block title</h3>
      <p>Block content.</p>
    </div>
    <div class="wb-grid wb-grid-2">
      <!-- fallback child/content output -->
    </div>
  </div>
</section>

Main CSS / WebBlocks UI classes

Fallback branches use existing primitives including wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-1, wb-gap-2, wb-gap-3, wb-grid, wb-grid-2, wb-grid-3, wb-table-wrap, wb-table, wb-table-striped, wb-slider, wb-btn, wb-link, wb-input, wb-textarea, and wb-select.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>settings.items/cards/entries</td><td>arrays</td><td>Can drive compatibility list/card-style output depending on fallback branch.</td></tr><tr><td>settings.rows/options/related_slugs</td><td>arrays</td><td>Used by fallback branches when present.</td></tr><tr><td>block type/source context</td><td>varies</td><td>needs source confirmation for exact branch selection.</td></tr></tbody></table>

Use for / Avoid for

Use for: safe degraded rendering for unsupported production blocks.

Avoid for: planned page composition or normal migrations.

Notes

This is the safety renderer for unknown or transitional slugs. It contains branch-specific output for older slugs such as comparison, timeline, product-card, pagination, input, textarea, select, checkbox-group, and radio-group. Prefer documenting dedicated renderer files where they exist.

Missing Renderer (`missing-renderer`)

Renderer source

packages/webblocks-cms/resources/views/pages/partials/blocks/missing-renderer.blade.php

Rendered HTML

<div class="wb-alert wb-alert-warning">
  <div>
    <div class="wb-alert-title">Missing Block Renderer</div>
    <div>Expected renderer for <code>unknown</code> at <code>...</code>.</div>
  </div>
</div>

Main CSS / WebBlocks UI classes

wb-alert, wb-alert-warning, wb-alert-title.

Settings -> class / markup map

<table><thead><tr><th>Setting</th><th>Value</th><th>Output effect</th></tr></thead><tbody><tr><td>type slug</td><td>any missing renderer slug</td><td>Shows warning alert naming expected renderer file.</td></tr><tr><td>environment</td><td>non-production fallback path</td><td>Used when no public renderer exists outside production.</td></tr><tr><td>runtime settings</td><td>n/a</td><td>No block settings affect this warning output.</td></tr></tbody></table>

Use for / Avoid for

Use for: developer visibility when no renderer exists outside production.

Avoid for: public content design.

Notes

This diagnostic renderer is used when a concrete block renderer cannot be resolved.