The Split Content Component lets you create a clean, two‑column section with an image on one side and formatted text on the other. It’s perfect for:

• Brand storytelling
• Product highlights
• Process explanations
• Side‑by‑side comparisons
• Visual + descriptive content blocks

You control the layout, alignment, column ratio, colors, and content — giving you a highly flexible building block for your brand guide.

🌟 What You Can Do with the Split Content Component

Inside this component, you can:

• Choose whether the image appears on the left or right
• Adjust the column ratio (50/50, 60/40, 70/30, etc.)
• Control vertical alignment of the text
• Select an image from your uploads
• Add rich, formatted text
• Customize background and text colors
• Maintain brand consistency with theme‑aware color options

It’s one of the most versatile layout components in MyStyleGuide.io.

🧭 Component Overview

When you open the Split Content Component in the Component Editor, you’ll see four main sections:

1. Layout Settings

This section controls how the component is structured.

Image Position

Choose whether the image appears on the left or right.

• Default: Image Right
• Check “Reverse” to place the image on the left

This gives you flexibility when designing alternating layouts.

Column Ratio

Control how much space each side takes:

• 50 / 50
• 60 / 40
• 40 / 60
• 70 / 30
• 30 / 70
• 100 / 100 (full‑width stacked layout)

This lets you emphasize either the image or the text.

Vertical Alignment

Choose how the text aligns relative to the image:

• Top
• Center (default)
• Bottom

This is especially useful when using tall images or short text blocks.

2. Image Settings

You can select any image you’ve uploaded to your brand’s /uploads/ folder.

Supported formats include:

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

If you don’t see the image you need, upload it using the Media Upload button in the Component Editor.

3. Content (WYSIWYG Editor)

This is a full rich‑text editor where you can:

• Add headings
• Bold or italicize text
• Create lists
• Insert links
• Add spacing and structure
• Format content however you like

This gives you complete control over the written portion of the component.

4. Color Settings

You can customize:

Background Color

Sets the background behind the entire split section.

Text Color

Overrides the default text color for this component.

Both fields support:

• HEX values
• Theme color presets
• Leaving blank to use default styling

This ensures your split content blocks stay visually consistent with your brand.

🎨 Theme‑Aware Color Options

All color fields automatically pull from your brand’s theme colors, including:

• Light / dark backgrounds
• Highlight colors
• Typography colors

This makes it easy to maintain a cohesive visual style across your entire guide.

💾 Saving Your Changes

When you’re done editing:

1. Click Save Component
2. The preview updates instantly
3. Your changes appear on the page immediately

If the component is nested inside a layout row, it behaves exactly the same.

🎯 Summary

The Split Content Component helps you:

• Combine images and text in a clean, flexible layout
• Control image position, column ratio, and alignment
• Add rich, formatted content
• Customize background and text colors
• Maintain brand consistency with theme‑aware options
• Build polished, professional content sections

It’s one of the most powerful layout tools in MyStyleGuide.io.