HTML
Use HTML blocks when a design needs custom markup. Add one from the left sidebar. Use the right sidebar for properties, or double-click the block on the canvas to edit its markup inline.
Common properties
Most blocks share these controls in the right sidebar. Selecting a child also shows controls for its parent layout.
| Property | Details |
|---|---|
| Size | Width can be fixed, percentage-based, or automatic. Height can be fixed, flexible, or constrained by minimum and maximum values. Lock the aspect ratio to preserve proportions. Size values support variables. |
| Arrange | X and Y position blocks on the canvas or inside Free Panels, using fixed values or percentage anchors. Alignment controls place blocks at common positions. Rotate, flip, lock, or change the layer order. |
| Background | Choose a solid color, a linear, radial, or conic gradient, or a pattern. Colors support variables. Gradient stops have colors and positions and are sorted by position; linear and conic gradients also have an angle. Pattern colors and size support variables, with controls varying by pattern. |
| Border | Simple mode shares color, thickness, style, and radius across all sides. Advanced mode sets each side's color, thickness, and style and each corner's radius independently. |
| Shadow | Add layers of regular shadow, inner shadow, or glow, subject to the block-specific limits below. |
Canvas and block backgrounds are separate: transparent areas reveal the parent or canvas. Patterns are based on CSS Pattern. See Sizing and positioning for sizing modes and position anchors.
Block-specific properties
Section titled “Block-specific properties”| Property | Details | Variables |
|---|---|---|
| Markup | HTML rendered inside the block. | Handlebars |
| Padding | Space between the edge and content. Simple mode shares an inset; Advanced mode sets each side. | — |
| Text color | Default text color inside the block. | Yes |
Preview notes
Section titled “Preview notes”HTML blocks preview in an iframe to isolate custom markup from the editor. Some behavior can differ from the exported HTML. If something looks off, use the HTML/export button in the top toolbar to inspect the generated HTML.
Templated content
HTML blocks support Handlebars placeholders inside their markup.
Many properties can use variables to assign their value when each image is created. Variables can be required, ignored, or given a fallback value. Pass values in template_values when rendering the template.