The Image Component lets you place a single image anywhere on your brand guide page. It’s perfect for product photos, brand examples, diagrams, illustrations, or any visual element you want to highlight.

You can choose from any image you’ve uploaded to your brand’s Uploads folder, add an optional caption, and customize background and text colors to match your brand’s theme.

🌟 What You Can Do with the Image Component

Inside this component, you can:

• Select an image from your brand’s uploaded files
• Add an optional caption
• Choose a background color
• Choose a caption text color
• Use your theme’s color palette for consistent styling

It’s simple, flexible, and ideal for visual storytelling.

🧭 Component Overview

When you open the Image Component in the Component Editor, you’ll see three main sections:

1. Image Selection

A dropdown lists all image files you’ve uploaded to:

/clients/[brand]/uploads/

Supported formats include:

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

To select an image:

1. Open the dropdown
2. Choose the file you want
3. The preview updates automatically

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

2. Caption

You can add an optional caption below the image.

This is great for:

• Describing the image
• Adding context
• Labeling diagrams
• Providing credit or attribution

The caption is a simple text field — short and clean.

3. Color Settings

You can customize two color fields:

Background Color

Sets the background behind the image and caption.

Caption Text Color

Controls the color of the caption text.

Both fields use the same color picker system as the rest of MyStyleGuide.io:

• Enter a HEX value
• Or choose from your theme’s predefined colors
• Or leave blank to use default styling

This ensures your image blocks stay visually consistent with your brand.

🎨 Theme‑Aware Color Options

The color dropdowns 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 refreshes instantly
3. Your changes appear on the page immediately

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

🎯 Summary

The Image Component helps you:

• Add clean, responsive images to any page
• Include optional captions
• Customize background and text colors
• Maintain brand consistency with theme‑aware color options
• Build visually rich, professional brand guide pages

It’s a simple but essential component for showcasing your brand visually.