Split Panel
A two-column section with a large image on one side and a title, description, bullet points, and optional box detail on the other — configurable for image-left or image-right layouts.
What It Does
The Split Panel module divides the section into two equal columns: one holds a large image, the other holds structured text content — a tag, title, description, bullet point list, and an optional box of detail items. Both columns can have independent background colours, and the image column can alternatively display a background gradient or image instead of a standalone photo. The layout flips between image-left and image-right.
Best Used For
- Product or service explanations with a supporting visual
- "About" or "Our Approach" sections with a team or workspace photo
- Comparison or feature breakdown sections
- Any two-column content layout where visual and text content need equal weight
Variants
Image Left
The image panel sits on the left; the text content is on the right. The natural reading flow draws the eye to the image first.
Best for: Most two-column feature or product sections
Image Right
The image panel sits on the right; the text content is on the left. Useful for alternating layout when stacking multiple Split Panel modules.
Best for: Alternating layouts in multi-section product pages
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| variant | enumeration | No | Controls image position -- Image Left or Image Right |
| tag | component | No | Short label or category badge above the title |
| title | component | No | Main section heading |
| description | blocks | No | Supporting body text below the title |
| descriptionColor | component | No | Colour configuration for the description text |
| contentAlign | enumeration | No | Alignment of text content |
| bullet | component | No | Up to 8 bullet point items -- each is a short text line |
| bulletGap | integer | No | Vertical spacing between bullet items (0-48 pixels) |
| boxList | component | No | Grouped detail box with additional structured content |
| image | media | No | Image displayed in the media panel |
| imageSectionBackground | component | No | Background for the image panel (colour, gradient, or image) |
| detailSectionBackground | component | No | Background for the text panel |
| innerBackground | component | No | Background applied to the inner content area |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
| divider | boolean | No | Show divider between panels |
| button | component | No | Call-to-action button |
Tips for Great Results
- Keep the title to 4 to 8 words — it reads as a headline, not a sentence.
- Use bullet points for scannable key facts — 3 to 6 bullets works best.
- Use contrasting backgrounds between the image and text panels to create clear visual separation.
- Alternate Image Left and Image Right when stacking multiple Split Panels to create a natural zigzag layout.
Supported Languages
Fully bilingual — all text fields support both English and Thai content.