# 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](https://css-pattern.com/). See [Sizing and positioning](/template-editor/advanced/sizing-positioning/) for sizing modes and position anchors.

## 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

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](/template-editor/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.