Edit div

Name

Also known as (comma separated)

Brief definition Generic block-level container.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "text", "type": "text", "label": "Content", "default": "Just a box" }, { "id": "bg", "type": "color", "label": "Background", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] }, { "id": "padding", "type": "number", "label": "Padding", "default": 24, "min": 0, "max": 48, "step": 2 }, { "id": "radius", "type": "select", "label": "Corners", "default": "rounded", "options": [ "square", "rounded", "pill" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"div-demo\">\n <p class=\"div-demo__label\">A <code>&lt;div&gt;</code> carries no meaning of its own — it is purely a box for layout and styling</p>\n <div class=\"div-box div-box--{{radius}}\" style=\"background:{{bg}};padding:{{padding}}px;\">{{text}}</div>\n</div>\n<style>\n.div-demo { width: 320px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; }\n.div-demo__label { margin: 0 0 12px; color: #241430aa; font-size: 13px; }\n.div-demo__label code { background: #24143012; padding: 1px 5px; border-radius: 4px; }\n.div-box { font-weight: 600; text-align: center; box-sizing: border-box; }\n.div-box--square { border-radius: 0; }\n.div-box--rounded { border-radius: 12px; }\n.div-box--pill { border-radius: 999px; }\n</style>", "tailwind": "<div class=\"w-[320px] box-border font-sans text-sm text-[#241430]\">\n <p class=\"m-0 mb-3 text-[13px] text-[#241430]/65\">A <code class=\"bg-[#24143012] px-1.5 py-0.5 rounded\">&lt;div&gt;</code> carries no meaning of its own — it is purely a box for layout and styling</p>\n <div class=\"div-box-tw div-box-tw--{{radius}} font-semibold text-center box-border\" style=\"background:{{bg}};padding:{{padding}}px;\">{{text}}</div>\n</div>\n<style>\n.div-box-tw--square { border-radius: 0; }\n.div-box-tw--rounded { border-radius: 12px; }\n.div-box-tw--pill { border-radius: 999px; }\n</style>", "react": "export function DivElement({\n text = \"{{text}}\",\n bg = \"{{bg}}\",\n padding = {{padding}},\n radius = \"{{radius}}\",\n}) {\n const corner = { square: 0, rounded: 12, pill: 999 }[radius] ?? 12;\n return (\n <div style={{ width: 320, boxSizing: \"border-box\", font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\" }}>\n <p style={{ margin: \"0 0 12px\", color: \"#241430aa\", fontSize: 13 }}>\n A <code style={{ background: \"#24143012\", padding: \"1px 5px\", borderRadius: 4 }}>&lt;div&gt;</code> carries no meaning of its own — it is purely a box for layout and styling\n </p>\n <div style={{ background: bg, padding, borderRadius: corner, fontWeight: 600, textAlign: \"center\", boxSizing: \"border-box\" }}>{text}</div>\n </div>\n );\n}" }