add_div
Add a box layer to a card. Pass html to draw a custom card: width and height set its layout box, and every visible style goes in the html, since backgroundColor and borderRadius only style plain boxes without html. A style element stays inside the card.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | No | Layer center, in percent of the card width from the card center. 50 is the right edge. | |
| y | No | Layer center, in percent of the card height from the card center. 50 is the bottom edge. | |
| html | No | Custom card HTML, up to 8000 characters. Image src and CSS url() must be URLs from upload_image with type asset; data: URLs are rejected. font-family can use built-in editor fonts and fonts added with add_project_font; @import and external stylesheets are rejected. Mark everything a user may want to change, so the editor's Content panel can edit it and AI translation translates it: data-edit="text" on each element whose words change (headlines, labels, list rows, numbers; put it on the innermost element holding the words; line breaks are <br>), data-edit="image" on an <img> or on an element with a CSS background-image, data-edit-color="--accent" on an element whose style sets that CSS variable (use it as var(--accent); comma-separate several), data-edit-list on a container whose direct children are repeatable items (rows, bullets, cards), with data-max (default 12) and data-min (default 1). data-label names a field or list in the panel. Text in unmarked elements is not translated. | |
| layer | No | front paints above the phone and image layers, back paints behind the phone. Text layers always paint above both. Defaults to front for html cards and back for plain boxes. | |
| scale | No | Visual multiplier from the center, 0.1 to 4. The html keeps its layout size and does not reflow. 1 is natural size. | |
| width | Yes | CSS pixels on the 500px-tall card. | |
| height | Yes | CSS pixels on the 500px-tall card. | |
| opacity | No | ||
| rotationX | No | 3D tilt in degrees, -360 to 360, about the box center with the same perspective as phones. 0 is flat. | |
| rotationY | No | 3D tilt in degrees, -360 to 360, about the box center with the same perspective as phones. 0 is flat. | |
| rotationZ | No | 3D tilt in degrees, -360 to 360, about the box center with the same perspective as phones. 0 is flat. | |
| borderRadius | No | ||
| screenshotId | Yes | ||
| backgroundColor | No |