Style Manager

The Style Manager (located in the Right Inspector Panel) activates whenever an element or component is selected on the editor canvas. It provides precise control over styling, class assignments, unique IDs, and functional component properties.

---

Component Header & Identification

The top of the Style Manager displays the selected component type (e.g., Text, Link, Image, Container) along with element selection controls:

• Component Type Identifier: Displays the active block icon and name (e.g., T Text).
• Options Menu (⋮): Access component-level actions such as duplicating, copying, resetting styles, or deleting the component.

---

Classes & Component ID Bar

Manage custom CSS classes and element selectors at the top of the panel:

• Add Classes (🏷️ / +): Attach custom utility classes or reusable global theme classes (e.g., .bg-primary-color, .border-radius, .warning-color). Multiple classes can be stacked on a single component.
• Component ID Selector (#id): Displays the unique element identifier assigned to the component (e.g., #i1bb). Clicking this allows you to target styling specifically to this individual element instance.

---

Component Settings & Attributes

Depending on the selected block type, the top panel section allows you to configure functional HTML attributes and behavior. For example:

• Link Components (Link):
  • Href (href): Set the target destination URL or bind a dynamic variable path (e.g., https://example.com or {{customer.portal_url}}).
  • Target: Configure link opening behavior (e.g., _blank for new tab or _self for same window).
• Image Components (Image):
  • Source (src): Static media asset selection or dynamic image URL mapping.
  • Alt Text (alt): Define alternative text descriptions for accessibility and PDF engine metadata.

---

Style Accordions

Depending on the selected block type, some options will be hidden.Styling controls are grouped into collapsible categories for granular visual customization. For exampla:

1. Sizing

Adjust component dimensions and inner boundary spacing:

• Width & Height: Set precise values or leave as auto (supports px, %, rem, vh/vw).
• Padding: Control internal element padding:
  • Uniform Padding: Set a single value applied equally to all four sides (e.g., 10 px).
  • Side-by-Side Controls: Toggle individual side inputs to set custom Top, Right, Bottom, and Left padding values independently.

---

2. Typography

Customize text presentation and color properties:

• Color: Set primary text color using hex codes, RGB/RGBA values, or color pickers.
• Font Family: Select baseline fonts, loaded Google Fonts, or inherit from global theme rules.
• Font Size & Weight: Adjust text size and font thickness (e.g., Light, Regular, Bold, Extra Bold).
• Line Height & Letter Spacing: Fine-tune vertical line spacing and character kerning.
• Alignment: Align text left, center, right, or justify.