Split Content Component

The Split Content Component displays an image alongside formatted text, making it easy to combine visuals and written content in a clean, balanced layout. With flexible layout controls, it's ideal for presenting information that benefits from both imagery and explanation.

Whether you're introducing a product, telling your brand story, or explaining a process, the Split Content Component helps create engaging, easy-to-read sections.

Common Uses

The Split Content Component is ideal for:

• Brand storytelling
• Product or service highlights
• Mission and values
• Process explanations
• Feature callouts
• Before-and-after comparisons
• Image and text combinations

Alternating the image position between sections is a simple way to create visual rhythm throughout your page.

Layout Options

Customize how your content is arranged.

Image Position

Choose whether the image appears on the left or right side of the section.

Alternating image placement across multiple sections creates a more dynamic and engaging layout.

Column Ratio

Control how much space is allocated to the image and text.

Choose from a variety of layouts, including balanced (50/50) or image- and text-focused ratios such as 60/40 or 70/30, allowing you to emphasize the content that's most important.

Vertical Alignment

Align the text relative to the image.

Choose from:

• Top
• Center
• Bottom

This is especially useful when combining images and text of different heights.

Image

Select an image from your brand's media library.

Supported formats include:

• JPG / JPEG
• PNG
• WEBP
• GIF
• SVG

Using high-quality imagery helps create a polished, professional presentation.

Content

The text area includes a full rich text editor.

You can add:

• Headings
• Paragraphs
• Lists
• Links
• Bold and italic formatting
• Standard text styling

This allows you to create anything from a short description to a detailed content section.

Color Options

Customize the appearance of the component using optional color settings.

Background Color

Apply a custom background color behind the entire section.

This can help separate content areas or reinforce your brand's color palette.

Text Color

Choose a custom text color for this section.

If left blank, the component automatically uses your theme's default typography colors.

Theme Integration

Color selections integrate directly with your brand theme.

You can:

• Select predefined theme colors
• Enter a custom HEX value
• Leave the field blank to inherit your default styling

Using your theme colors helps maintain a consistent appearance throughout your brand guide.

Saving Your Changes

Click Save Component to apply your updates.

Your changes are immediately reflected in the live preview, making it easy to verify the finished layout.

Tips

• Alternate image placement between sections to create visual variety.
• Keep text concise so the image remains an important part of the layout.
• Use consistent image sizes for a more polished page design.
• Choose images that support and reinforce the accompanying content.
• Pair the Split Content Component with Paragraphs or Full-Width Media sections to build engaging, well-balanced layouts.

Summary

The Split Content Component combines imagery and written content into a flexible two-column layout.

With customizable positioning, spacing, colors, and rich text support, it's one of the most versatile components for building visually engaging, informative pages throughout your brand guide.