Edit Background

Name

Also known as (comma separated)

Brief definition Underlying visual layer.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "type", "type": "select", "label": "Background type", "default": "solid", "options": [ "solid", "gradient", "dots" ] }, { "id": "color1", "type": "color", "label": "Colour 1", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0" ] }, { "id": "color2", "type": "color", "label": "Colour 2", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#E8A020", "#F5C2E0", "#241430" ] }, { "id": "height", "type": "number", "label": "Panel height", "default": 100, "min": 60, "max": 160, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"bg-wrap\" role=\"img\" aria-label=\"A panel demonstrating a solid colour, a two-colour gradient, or a dot pattern as its background\" data-bg=\"{{type}}\" style=\"--c1:{{color1}};--c2:{{color2}};\">\n <div class=\"bg-panel\" style=\"height:{{height}}px;\"></div>\n <p class=\"bg-caption\">background: {{type}} &middot; {{color1}} &amp; {{color2}}</p>\n</div>\n<style>\n.bg-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.bg-panel { border-radius: 10px; border: 1.5px solid #24143022; }\n[data-bg=\"solid\"] .bg-panel { background: var(--c1); }\n[data-bg=\"gradient\"] .bg-panel { background: linear-gradient(135deg, var(--c1), var(--c2)); }\n[data-bg=\"dots\"] .bg-panel { background-color: var(--c1); background-image: radial-gradient(var(--c2) 2.5px, transparent 2.5px); background-size: 16px 16px; }\n.bg-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"bg-tw font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"A panel demonstrating a solid colour, a two-colour gradient, or a dot pattern as its background\" data-bg=\"{{type}}\" style=\"--c1:{{color1}};--c2:{{color2}};\">\n <div class=\"bg-tw-panel rounded-[10px] border-[1.5px] border-[#24143022]\" style=\"height:{{height}}px;\"></div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">background: {{type}} &middot; {{color1}} &amp; {{color2}}</p>\n</div>\n<style>\n.bg-tw[data-bg=\"solid\"] .bg-tw-panel { background: var(--c1); }\n.bg-tw[data-bg=\"gradient\"] .bg-tw-panel { background: linear-gradient(135deg, var(--c1), var(--c2)); }\n.bg-tw[data-bg=\"dots\"] .bg-tw-panel { background-color: var(--c1); background-image: radial-gradient(var(--c2) 2.5px, transparent 2.5px); background-size: 16px 16px; }\n</style>", "react": "export function Background({\n type = \"{{type}}\",\n color1 = \"{{color1}}\",\n color2 = \"{{color2}}\",\n height = {{height}},\n}) {\n const bg = type === \"solid\" ? color1\n : type === \"gradient\" ? `linear-gradient(135deg, ${color1}, ${color2})`\n : `radial-gradient(${color2} 2.5px, transparent 2.5px)`;\n const style = { height, borderRadius: 10, border: \"1.5px solid #24143022\",\n ...(type === \"dots\" ? { backgroundColor: color1, backgroundImage: bg, backgroundSize: \"16px 16px\" } : { background: bg }) };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A panel demonstrating a solid colour, a two-colour gradient, or a dot pattern as its background\">\n <div style={style} />\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>background: {type} &middot; {color1} &amp; {color2}</p>\n </div>\n );\n}" }