Edit Child Component

Name

Also known as (comma separated)

Brief definition Component nested inside another.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "parentLabel", "type": "text", "label": "Parent name", "default": "Panel" }, { "id": "childLabel", "type": "text", "label": "Child name", "default": "Icon" }, { "id": "grandchild", "type": "toggle", "label": "Nest a grandchild too", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"childc\" style=\"border-color:{{accent}};\">\n <span class=\"childc__tag\">{{parentLabel}}</span>\n <div class=\"childc__nest\" style=\"border-color:{{accent}};\">\n <span class=\"childc__tag childc__tag--child\" style=\"background:{{accent}};\">{{childLabel}}</span>\n {{#if grandchild}}<div class=\"childc__nest childc__nest--deep\"><span class=\"childc__tag childc__tag--grandchild\">Label</span></div>{{/if}}\n </div>\n</div>\n<style>\n.childc { font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 10px; width: 280px; box-sizing: border-box; border: 2px dashed; position: relative; }\n.childc__tag { position: absolute; top: -9px; left: 10px; background: #FAF7F2; padding: 0 6px; font-weight: 700; }\n.childc__nest { margin-top: 12px; border: 2px solid; border-radius: 8px; padding: 20px 14px 14px; position: relative; min-height: 40px; }\n.childc__tag--child { position: absolute; top: -9px; left: 10px; color: #241430; border-radius: 4px; }\n.childc__nest--deep { margin-top: 10px; border: 2px dotted #24143060; background: #24143008; }\n.childc__tag--grandchild { position: absolute; top: -9px; left: 10px; background: #FAF7F2; color: #24143099; }\n</style>", "tailwind": "<div class=\"font-sans text-xs text-[#241430] bg-[#FAF7F2] p-4.5 rounded-[10px] w-[280px] box-border border-2 border-dashed relative\" style=\"border-color:{{accent}};\">\n <span class=\"absolute -top-[9px] left-2.5 bg-[#FAF7F2] px-1.5 font-bold\">{{parentLabel}}</span>\n <div class=\"mt-3 border-2 rounded-lg py-3.5 px-3.5 pt-5 relative min-h-[40px]\" style=\"border-color:{{accent}};\">\n <span class=\"absolute -top-[9px] left-2.5 rounded text-[#241430] px-1.5\" style=\"background:{{accent}};\">{{childLabel}}</span>\n {{#if grandchild}}<div class=\"mt-2.5 border-2 border-dotted border-[#24143060] bg-[#24143008] rounded-lg py-3.5 px-3.5 pt-5 relative\"><span class=\"absolute -top-[9px] left-2.5 bg-[#FAF7F2] px-1.5 text-[#24143099]\">Label</span></div>{{/if}}\n </div>\n</div>", "react": "export function ChildComponent({\n parentLabel = \"{{parentLabel}}\",\n childLabel = \"{{childLabel}}\",\n grandchild = {{grandchild}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"12px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 10, width: 280, boxSizing: \"border-box\", border: `2px dashed ${accent}`, position: \"relative\" }}>\n <span style={{ position: \"absolute\", top: -9, left: 10, background: \"#FAF7F2\", padding: \"0 6px\", fontWeight: 700 }}>{parentLabel}</span>\n <div style={{ marginTop: 12, border: `2px solid ${accent}`, borderRadius: 8, padding: \"20px 14px 14px\", position: \"relative\", minHeight: 40 }}>\n <span style={{ position: \"absolute\", top: -9, left: 10, background: accent, color: \"#241430\", borderRadius: 4, padding: \"0 6px\" }}>{childLabel}</span>\n {grandchild && (\n <div style={{ marginTop: 10, border: \"2px dotted #24143060\", background: \"#24143008\", borderRadius: 8, padding: \"20px 14px 14px\", position: \"relative\" }}>\n <span style={{ position: \"absolute\", top: -9, left: 10, background: \"#FAF7F2\", color: \"#24143099\", padding: \"0 6px\" }}>Label</span>\n </div>\n )}\n </div>\n </div>\n );\n}" }