Rule.io SDK

---

Rule.io SDK / rcml/src / createSectionElement

Function: createSectionElement()

createSectionElement(options): RcmlSection

Defined in: rcml/src/email/create-rcml-element.ts:686

Build an <rc-section> — a row-level container. Accepts 0–20 direct children (per the schema's maxChildCount) — a section is typically populated with columns and/or a single <rc-group> wrapping columns to keep them side-by-side on mobile, but empty sections are valid at the factory level (useful during interactive editing). The group counts as one child.

The Rule.io editor's Responsive control models sections as a binary switch: Vertical → all columns are direct children; Horizontal → all columns live inside one <rc-group>. The SDK enforces this pattern (≤1 rc-group per section) so SDK-built templates round-trip through the editor UI without breaking. Backend and rendering accept multiple groups; the SDK limit will be lifted once the editor supports multi-group grouping.

Every direct child of <rc-body> is typically a section or a control-flow wrapper (<rc-loop> / <rc-switch> / <rc-wrapper>).

Parameters

options

SectionElementOptions

options.children is the list of column and/or group children; options.attrs controls section-level background / padding / borders.

Returns

RcmlSection

A typed RcmlSection node.

Throws

When attrs are invalid, any child is neither an <rc-column> nor an <rc-group>, more than one child is an <rc-group>, or there are more than 20 children.

Example

// Vertical (columns stack on mobile):
createSectionElement({
  attrs: { 'background-color': '#ffffff', padding: '20px 0' },
  children: [
    createColumnElement({ children: [...] }),
    createColumnElement({ children: [...] }),
  ],
})

// Horizontal (columns stay side-by-side on mobile):
createSectionElement({
  children: [
    createGroupElement({
      children: [
        createColumnElement({ attrs: { width: '50%' }, children: [...] }),
        createColumnElement({ attrs: { width: '50%' }, children: [...] }),
      ],
    }),
  ],
})