Documentation
Elements Reference.
Every element type Gallop can generate, with properties and usage examples.
Content Elements
Text and media.
Core content elements that form the building blocks of every generated page.
Headings
H1 through H6 with configurable font size, weight, color, and alignment. Supports DM Serif Display (serif) and Inter (sans-serif) font families via Stride classes.
Text Blocks
Paragraphs with full typographic control: font size, line height, color, alignment. Supports inline bold, italic, and link formatting within content.
Images
Responsive images with configurable width, aspect ratio, border radius, and alt text. Outputs standard WordPress image blocks with srcset for performance.
Buttons
Primary, secondary, and outline button variants. Configurable text, link destination, size, border radius, and icon. Renders as WordPress button blocks.
Lists
Ordered and unordered lists with configurable bullet style, spacing, and content per item. Supports nested lists up to three levels deep.
Blockquotes
Styled quotes with optional attribution. Renders with left border accent and italic styling. Commonly used in testimonial sections.
Layout Elements
Structure and containers.
Structural elements that define page hierarchy. These are the containers that hold content elements.
Sections
Top-level page divisions with background color, padding, and spacing. Every page is a sequence of sections. Each section contains one or more rows.
Rows
Horizontal groupings within a section. Define grid behavior, column count, and gap spacing. A row contains one or more columns.
Columns
Width-defined containers within a row. Support fractional widths (1/2, 1/3, 2/3, 1/4). Columns contain content elements.
Dividers
Horizontal rules between content blocks. Configurable width, thickness, color, and spacing. Used to create visual separation within sections.
Spacers
Vertical whitespace elements with configurable height. Used to control vertical rhythm between content elements within a section.
Forms
Contact forms with configurable fields (text, email, textarea, select, checkbox). Renders as WordPress form blocks with validation.
Interactive Elements
Dynamic and interactive.
Elements that respond to user interaction. All render with progressive enhancement — content is accessible without JavaScript.
Accordion
Collapsible content panels with configurable headers and body content. Commonly used for FAQ sections and expandable details.
Tabs
Tabbed content panels with labeled tab headers. Each tab contains independent content elements. Renders accessible ARIA roles.
Slider
Horizontal content slider with configurable slide content, autoplay, and navigation controls. Touch-friendly for mobile.
Slideshow
Full-width image and content slideshow with transitions, captions, and pagination. Supports hero-style presentations.
Popover
Contextual overlay triggered by click or hover. Configurable position and content. Useful for tooltips and supplementary info.
BeforeAfter
Draggable comparison slider between two images. Ideal for showcasing transformations, redesigns, and visual progress.
Media & Embeds
Rich media elements.
Video, audio, animation, and embedded content. All elements support responsive sizing and accessibility attributes.
Video
Self-hosted or YouTube/Vimeo embeds with configurable autoplay, controls, poster image, and aspect ratio.
Audio
Audio player with configurable source, controls, and optional waveform visualization. Supports MP3 and standard web formats.
Gallery
Image gallery grid with lightbox support, configurable columns, and caption display. Responsive layout adapts to viewport.
Lottie
Lottie animation player for JSON-based vector animations. Configurable loop, autoplay, and speed. Lightweight alternative to video.
Embed
Generic embed container for iframes and third-party widgets. Configurable aspect ratio and responsive sizing.
Map
Embedded map with configurable location, zoom level, and styling. Renders as a responsive iframe with lazy loading.
Podcast
Podcast episode player with show notes, episode metadata, and embedded audio. Supports popular podcast hosting platforms.
Icon
Stride Icons integration with 250 curated SVG icons in regular and duotone weights. Configurable size, color, and category.
Data & Commerce
Business and data elements.
Specialized elements for pricing, testimonials, statistics, and structured data display.
PricingCard
Pricing tier card with plan name, price, billing period, feature list, and CTA button. Supports highlighted/featured state.
TestimonialCard
Testimonial display with quote text, author name, role, company, and optional avatar. Star rating support.
Timeline
Vertical timeline with dated entries and descriptions. Used for company history, project milestones, and process flows.
Table
Responsive data table with configurable headers, rows, and column alignment. Supports horizontal scrolling on mobile.
Counter
Animated number counter with configurable start, end, duration, and suffix. Used for statistics and social proof.
Countdown
Live countdown timer with target date. Displays days, hours, minutes, and seconds. Used for launches and promotions.
Rating
Star or numeric rating display with configurable value and max. Visual representation with color-coded fill.
LogoGrid
Client or partner logo grid with automatic sizing and grayscale hover effect. Commonly used for trust signals.
Specialized
Additional elements.
Utility and specialized elements for advanced use cases.
Badge
Inline badge with configurable label and color variant. Used for labels, tags, and status indicators.
Eyebrow
Small uppercase label text for section introductions. Renders with the label-sm label-accent pattern.
Lead
Large introductory paragraph with increased font size and line height. Used as the opening text below a section heading.
Code
Code block with syntax highlighting support. Configurable language, line numbers, and copy button.
GradientText
Text with CSS gradient fill. Configurable gradient direction, color stops, and text content.
AnimatedTyping
Typewriter-effect text with configurable strings, speed, and loop behavior. Eye-catching hero element.
Newsletter
Email signup form with configurable heading, description, and submit button. Integrates with WordPress hooks.
SocialIcons
Row of social media icon links with configurable platforms, sizes, and colors. SVG-based with hover states.
Progress
Progress bar with configurable value, max, label, and color. Used for skills, completion, and loading states.
QueryLoop
Dynamic WordPress content loop. Displays posts, custom post types, or taxonomies with configurable templates.
Schema
Element structure.
Every element is defined as a JSON object with a type, optional props, and optional children. The schema validates element structure at generation time.
Props are type-safe. A heading's level must be 1–6. A column's width must be a valid fraction. Invalid values are rejected and regenerated automatically.
- type: Element type string (heading, text, button, section, row, column, etc.)
- props: Type-specific properties (content, level, alignment, color, link, etc.)
- children: Array of nested elements (only for container types like section, row, column)
- classes: Array of Stride CSS class names applied to the element
{
"type": "section",
"props": {
"background": "cream",
"padding": "lg"
},
"children": [
{
"type": "row",
"props": { "columns": 2 },
"children": [
{
"type": "column",
"props": { "width": "1/2" },
"children": [
{
"type": "heading",
"props": {
"level": 2,
"content": "Our Services"
},
"classes": ["heading-lg"]
}
]
}
]
}
]
}Nesting Rules
What contains what.
Elements follow a strict nesting hierarchy. The schema enforces these rules at generation time — invalid nesting is caught before rendering.
Styling
Available classes.
Elements are styled through Stride CSS classes applied via the classes array. The Style Agent selects appropriate classes based on the page context and prompt.
Typography
heading-xl, heading-lg, heading-sm, body-text, text-sm. Font families, weights, and responsive sizing are handled by the class.
Color
text-primary, text-white, text-secondary, text-muted-dark. Background: section-cream, section-navy, section-cream-deep.
Spacing
mt-8, mt-16, mt-20, mt-24, mt-32, mt-40, mt-48. Margin-top utilities for vertical rhythm between elements.
Alignment
text-center, text-left. section-intro for centered content blocks. max-w-720, max-w-560 for width constraints.
Early Access
Explore the full schema.
Get early access when we ship.