UI Elements
UI elements are static components that display content in your app. Unlike interactive elements like buttons and inputs, UI elements are primarily for presentation—showing text, images, dividers, and containers that organize your layout.
Text Elements
Text elements display written content with semantic HTML tags for accessibility and SEO.
Text
The basic text element for paragraphs, labels, or inline content.
Content — The text to display
Tag — HTML tag (Paragraph, Label, or Span)
Tooltip — Optional info icon with hover text
Heading
Headings structure your content hierarchy with H1 through H6 tags.
Content — The heading text
Tag — Heading level (H1, H2, H3, H4, H5, H6, or Span)
Tooltip — Optional info icon with hover text
Page titles are typically H1. Use H2 for sections, H3 for subsections.
Visual Elements
Image
Displays images from URLs or uploaded files.
Image — Source URL or file upload
Alt text — Descriptive text for accessibility and SEO
Click action — Optional action when image is clicked
Divider
A horizontal line that separates content sections. No configuration needed—add it and style as needed.
Container Elements
Containers group and organize other elements to create layouts.
Box
A flexible container that holds any elements. Use boxes to:
Group related content
Create cards or panels
Apply background colors or borders to sections
Add click actions to entire sections
Boxes can be nested inside other boxes to create complex layouts.
Columns
Creates a multi-column layout with responsive controls.
Distribution — Relative column widths (e.g., "1 1" for equal, "2 1" for 2:1 ratio)
Horizontal align — Left, Center, Right, Space Between, Space Around
Vertical align — Top, Center, Bottom
Gap — Spacing between columns (0-100px, default 16px)
Stack on tablet/mobile — Automatically converts columns to rows on smaller screens
Column count — Add or remove columns with +/- buttons
Removing a column deletes all content inside it. This cannot be undone.
Advanced Elements
HTML Embed
Embeds custom HTML, CSS, and JavaScript directly into your app. Use for:
Third-party widgets or scripts
Custom styling not available in the builder
Specialized content like SVGs or iframes
HTML embeds can break your app if the code is invalid. Test thoroughly.
Styling Elements
Switch to the Style tab in the inspector to customize appearance. Every element includes:
Quick Styles — Component-specific properties like padding, background color, and alignment for fast adjustments
Style Sets — Connect to pre-built design systems or create custom styles
Advanced Overrides — Fine-tune CSS properties per state (hover, focus, disabled) and breakpoint (desktop, tablet, mobile)
For detailed styling guidance, see the Style documentation.
Tooltips
Text and Heading elements support tooltips—small info icons that display helpful text on hover. Use tooltips to:
Explain unfamiliar terms
Provide context without cluttering the UI
Guide users through complex forms
Toggle the tooltip on, choose an icon, and add your tooltip content.