The Percentage Clear Space Component is designed for brand guidelines that need to show how much space must surround a logo or mark.
It allows you to create multiple “cards,” each illustrating a different clear‑space rule — either using a dynamic, auto‑generated layout or a fully custom image.

This component is perfect for logo usage sections, spacing rules, and identity protection guidelines.

🌟 What You Can Do with the Percentage Clear Space Component

Inside this component, you can:

• Add a title, subtitle, and category label
• Choose how many cards appear per row
• Customize background and text colors
• Create multiple clear‑space cards
• Choose between Component Mode (auto‑generated spacing) or Image‑Only Mode (upload your own diagram)
• Reorder cards with drag‑and‑drop
• Add custom descriptions

It gives you full control over how your spacing rules are presented.

🧭 Component Overview

When you open the Percentage Clear Space Component in the Component Editor, you’ll see three main sections:

1. Text Settings

These fields control the text that appears above the card grid.

Title

A large heading for the section.
Examples:

• “Clear Space Requirements”
• “Logo Protection Zone”

Subtitle

A smaller supporting line.
Examples:

• “Maintain consistent spacing around the logo”
• “Minimum clear space ensures visibility and impact”

Category Label

A label that appears above each card.
Examples:

• “Primary Logo”
• “Horizontal Lockup”

Cards Per Row

Choose how many cards appear in each row:

• 1–6 per row
• Wider cards for detailed diagrams
• More cards per row for compact layouts

2. Color Settings

You can customize:

Background Color

Sets the background behind the entire component.

Text Color

Controls the color of titles, subtitles, and labels.

Both fields support:

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

This ensures your spacing section stays visually consistent with your brand.

3. Card Management

This is where the component becomes powerful.
You can add as many cards as you need, reorder them, and choose how each one is generated.

Each card has two modes:

🔧 Mode 1: Component Mode

Automatically generate a clear‑space diagram using your logo and a percentage.

This mode is ideal when you want the system to create a clean, consistent spacing diagram.

Each card includes:

Logo Image

Choose a logo from your uploads.

Clear Space Percentage

Enter a number (e.g., 20) to define the spacing around the logo.

Optional X Image

You can optionally upload an “X” marker image to represent the spacing unit.

Options include:

• Use default X
• Use no X
• Upload your own X graphic

Clearance Dimension

Choose what the percentage is based on:

• Width — spacing = % of logo width
• Height — spacing = % of logo height
• Size — spacing = % of the logo’s overall bounding box

This gives you flexibility depending on your brand’s spacing rules.

🖼 Mode 2: Image‑Only Mode

Upload a fully custom spacing diagram.

This mode is ideal when:

• You already have a designer‑created spacing diagram
• You want full visual control
• Your spacing rules are complex or non‑standard

Each card includes:

Image

Upload or select a custom spacing diagram.

Description

Add a short explanation or usage note.

🔁 Reordering Cards

Cards can be reordered using drag‑and‑drop:

• Grab the ⋮⋮ handle
• Drag the card to a new position
• The order updates automatically

This lets you structure your spacing rules in a logical sequence.

➕ Adding & Removing Cards

Add Card

Click + Add Card to create a new spacing card.

Delete Card

Each card includes a Delete Card button inside its panel.

🎨 Theme‑Aware Color Options

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

• Light / dark backgrounds
• Highlight colors
• Typography colors

This ensures your spacing section stays visually consistent with your brand.

💾 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 clear‑space diagrams will now appear on the page exactly as configured.

🎯 Summary

The Percentage Clear Space Component helps you:

• Create clean, professional logo spacing diagrams
• Use auto‑generated spacing or custom images
• Add multiple cards with flexible layouts
• Control spacing rules with percentages
• Customize colors and text
• Maintain brand consistency

It’s an essential component for any brand guide that includes logo usage rules.