Content Split
A two-column split module with image, rich-text content, badges, bullet points, and an optional CTA button on a configurable background.
What It Does
The Content Split module divides the section into two equal columns: one side holds an image (with configurable aspect ratio), and the other displays a set of badge labels, rich-text body content, a bullet point list, and an optional CTA button. The layout direction is configurable — the image can appear on the left or right. Backgrounds are fully configurable, either as a single unified background across both columns or as separate backgrounds for the image and content panels.
Best Used For
- Feature highlight sections pairing a visual with descriptive content
- Product showcase pages with supporting imagery and bullet point benefits
- About-us sections with branded imagery and rich-text narrative
- Content-heavy sections that benefit from visual emphasis on one side
Variants
Default
Image on the left, content (badges, rich text, bullets, button) on the right.
Best for: Standard feature or product highlight sections
Reversed
Image on the right, content on the left — a mirror of the Default layout.
Best for: Alternating layouts on long-form pages to break visual monotony
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| variant | enumeration | Yes | Layout direction -- DEFAULT (image left) or REVERSE (image right) |
| contentAlignment | enumeration | Yes | Vertical alignment of text content -- TOP, CENTER, or BOTTOM |
| imageBox | component | No | Image with ratio configuration |
| badge | component | No | Repeatable badge labels displayed above the content |
| content | customField | No | Rich-text body content (Quill editor) |
| bullets | component | No | Bullet point list with spacing configuration |
| button | component | No | Call-to-action button |
| backgroundType | enumeration | Yes | Background style -- FULL (single background) or FIFTY_FIFTY (separate image and content backgrounds) |
| background | component | No | Section background (used when backgroundType is FULL) |
| contentBackground | component | No | Background for the content panel (used when backgroundType is FIFTY_FIFTY) |
| imageBackground | component | No | Background for the image panel (used when backgroundType is FIFTY_FIFTY) |
Tips for Great Results
- Use a square or landscape image ratio in
imageBoxfor visual balance — portrait images can feel cramped in a 50/50 split. - Use
FIFTY_FIFTYbackground mode to create bold colour-block layouts where the image panel has a different background from the content panel. - Keep badge labels short (1-3 words) and limit to 3-4 badges to avoid cluttering the content side.
- Pair
contentAlignment: CENTERwith shorter content blocks; useTOPwhen the content is longer than the image height.
Supported Languages
Fully bilingual — all text fields (badge labels, rich-text content, bullet point text, button label) support both English and Thai content. The image asset is language-independent.