Content, Media & Lead Forms Components User Guide
Category: Content, Media & Lead Generation
Registered Admin Route: /admin/page-components
This guide covers all registered editorial content, image galleries, video players, customer testimonials, lead-capture forms, and calendar event components.
1. Editorial & Copy Components
A. Rich Text (rich_text) & Design Block (design_block)
- Formatting Options: Headings (
H1–H6), bold, italic, underline, strike, bullet list, numbered list, tables, links, blockquotes. - Typography Token Dropdown:
Foreground(Default),Primary(Brand color),Muted(Gray),Accent. - Font Size Dropdown:
Small (xs),Normal (sm),Base,Large (lg),Extra Large (xl).
B. Safe Raw HTML / Embed (safe_html)
- Purpose: Safely embed third-party widgets (e.g., Mailchimp forms, Calendly schedulers, interactive maps).
- HTML Allowlist Security: Validates code against approved media hosts.
<script>tags and inline event handlers are sanitized for security.
2. Media & Visual Components
A. Image Block (image_block)
| Field Label | Control Type | Input / Options | Purpose & Live Effect | Data Source Origin |
|---|---|---|---|---|
| Select Image | Image Picker | Upload / Select Asset | Pick image from library. | Populates from Digital Assets. |
| Aspect Ratio | Dropdown Selector | • Natural • Square (1:1) • Landscape (16:9) • Portrait (4:5) | Crops image container aspect ratio. | UI Option. |
| Border Radius | Dropdown Selector | • None • Small • Medium • Full Rounded | Sets corner rounding. | UI Option. |
| Enable Lightbox Zoom | Toggle Switch | On / Off | Opens image full-screen when clicked. | Toggle. |
B. Galleries (image_gallery, gallery_grid, gallery_slideshow)
- Gallery Style:
Grid Cards,Masonry Layout,Full-Width Slideshow. - Column Count: 2, 3, or 4 columns.
- Image Gap:
Small (12px),Medium (24px),Large (36px).
3. Testimonials & Social Proof Suite
- Testimonials Carousel (
testimonials,testimonial_carousel): Multi-review carousel with star rating badges, reviewer avatars, author names, and job roles. - Testimonial List Grid (
testimonial_list): Grid layout of customer review cards. - Testimonial Submission Form (
testimonial_submit_form): Customer-facing form allowing visitors to submit review feedback.
4. Lead Forms & Interactive Components
UI Controls & Options
| Component Type | Description | Key Configurable Dropdowns & Inputs | Data Source Origin |
|---|---|---|---|
form_embed | Embeds custom lead forms | • Select Project Form: Pick form from list | Populates from Marketing ➔ Forms. |
contact_form | Quick enquiry form | • Success Message: Custom confirmation prompt • Recipient Email: Notification target | Typed by user. |
newsletter_signup | Email capture bar | • Button Label: e.g. Subscribe• Form Style: Inline Bar or Stacked Card | Typed by user. |
calendar_events | Displays scheduled events | • Select Calendar: Pick calendar from list • Event Limit: Max events to display | Populates from Orbits ➔ Calendars. |