The Gallery Component lets you showcase multiple images in a clean, responsive grid. It’s perfect for:

• Brand photography
• Logo sets
• Product images
• Icon collections
• Visual examples
• Mood boards

You can mix images from your brand logo folders and your theme uploads, customize the layout, and control colors for a polished, on‑brand presentation.

🌟 What You Can Do with the Gallery Component

Inside this component, you can:

• Add a title, subtitle, and category label
• Choose how many images appear per row
• Select multiple images from your brand assets
• Disable image downloads if needed
• Customize colors for titles, text, labels, and background
• Maintain brand consistency with theme‑aware color options

It’s one of the most flexible visual components in MyStyleGuide.io.

🧭 Component Overview

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

1. Gallery Text Settings

These fields control the text that appears above the gallery.

Title

A large heading for the section.
Examples:

• “Brand Logos”
• “Photography”
• “Icon Library”

Subtitle

A smaller supporting line.
Examples:

• “Approved logo variations”
• “Brand imagery examples”

Category Label

A label that appears above each image card.
Examples:

• “Primary Logo”
• “Secondary Mark”
• “Photography Style”

Images Per Row

Choose how dense the gallery layout should be:

• 2 per row — large, spacious images
• 3 per row — balanced
• 4 per row — compact
• 5 per row — tighter grid
• 6 per row — dense, icon‑style layout

Disable Download

Turn this on if you don’t want users to download the images directly from the gallery.

2. Color Settings

You can customize four color fields:

Title Color

Controls the color of the main gallery title.

Text Color

Controls the subtitle and general text.

Category Label Color

Controls the label above each image.

Background Color

Sets the background behind the entire gallery section.

All color fields support:

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

This ensures your gallery stays visually consistent with your brand.

3. Image Selector

This is where you choose which images appear in the gallery.

You’ll see two groups:

Brand Logos

Automatically pulls from renderable web images located in the png, jpg or webp image uploads.

Perfect for logo sets, icon packs, and brand marks.

Theme Uploads

Pulls from your brand’s Theme uploads folder.

Great for:

• Photography
• Illustrations
• Product shots
• Custom graphics

Selecting Images

• Hold CTRL (Windows) or CMD (Mac) to select multiple
• Selected images appear in the order you choose them
• You can mix logos and uploaded images freely

The component stores your selections automatically.

🎨 Theme‑Aware Color Options

All color pickers 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

As you edit:

• Fields update the component’s JSON automatically
• The preview refreshes in real time
• Click Save Component to finalize your changes

Your gallery will now appear on the page exactly as configured.

🎯 Summary

The Gallery Component helps you:

• Display multiple images in a clean, responsive grid
• Mix brand logos and uploaded images
• Customize layout density
• Add titles, subtitles, and category labels
• Control colors for full brand consistency
• Disable downloads when needed

It’s a versatile, visually rich component ideal for showcasing your brand assets.