Edit Template

Name

Also known as (comma separated)

Brief definition Reusable page/layout structure.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "pageTitle", "type": "text", "label": "Template name", "default": "Dashboard template" }, { "id": "layout", "type": "select", "label": "Layout", "default": "sidebar", "options": [ "sidebar", "full-width", "split" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showFooter", "type": "toggle", "label": "Show footer region", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tmpl tmpl--{{layout}}\" role=\"img\" aria-label=\"{{pageTitle}}, {{layout}} layout\">\n <p class=\"tmpl__name\">{{pageTitle}}</p>\n <div class=\"tmpl__header\" style=\"background:{{accent}};\">header</div>\n <div class=\"tmpl__body\">\n <div class=\"tmpl__sidebar\">nav</div>\n <div class=\"tmpl__content tmpl__content--a\">content</div>\n <div class=\"tmpl__content tmpl__content--b\">content</div>\n </div>\n {{#if showFooter}}<div class=\"tmpl__footer\">footer</div>{{/if}}\n</div>\n<style>\n.tmpl { font: 11px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.tmpl__name { margin: 0 0 10px; font-size: 13px; font-weight: 700; }\n.tmpl__header { padding: 8px; border-radius: 6px; text-align: center; font-weight: 600; color: #241430; margin-bottom: 6px; }\n.tmpl__body { display: flex; gap: 6px; min-height: 70px; }\n.tmpl__sidebar { display: none; background: #24143014; border-radius: 6px; padding: 8px; width: 60px; text-align: center; }\n.tmpl__content { background: #24143008; border-radius: 6px; padding: 8px; flex: 1; text-align: center; display: none; }\n.tmpl__content--b { display: none; }\n.tmpl--sidebar .tmpl__sidebar { display: block; }\n.tmpl--sidebar .tmpl__content--a { display: block; }\n.tmpl--full-width .tmpl__content--a { display: block; }\n.tmpl--split .tmpl__content--a, .tmpl--split .tmpl__content--b { display: block; }\n.tmpl__footer { margin-top: 6px; padding: 8px; border-radius: 6px; background: #24143014; text-align: center; }\n</style>", "tailwind": "<div class=\"tmpltw tmpltw--{{layout}} font-sans text-[11px] text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"{{pageTitle}}, {{layout}} layout\">\n <p class=\"m-0 mb-2.5 text-[13px] font-bold\">{{pageTitle}}</p>\n <div class=\"py-2 rounded-md text-center font-semibold mb-1.5\" style=\"background:{{accent}};\">header</div>\n <div class=\"flex gap-1.5 min-h-[70px]\">\n <div class=\"tmpltw__sidebar hidden bg-[#24143014] rounded-md p-2 w-[60px] text-center\">nav</div>\n <div class=\"tmpltw__content tmpltw__content--a hidden bg-[#24143008] rounded-md p-2 flex-1 text-center\">content</div>\n <div class=\"tmpltw__content tmpltw__content--b hidden bg-[#24143008] rounded-md p-2 flex-1 text-center\">content</div>\n </div>\n {{#if showFooter}}<div class=\"mt-1.5 py-2 rounded-md bg-[#24143014] text-center\">footer</div>{{/if}}\n</div>\n<style>\n.tmpltw--sidebar .tmpltw__sidebar, .tmpltw--sidebar .tmpltw__content--a, .tmpltw--full-width .tmpltw__content--a, .tmpltw--split .tmpltw__content--a, .tmpltw--split .tmpltw__content--b { display: block; }\n</style>", "react": "export function Template({\n pageTitle = \"{{pageTitle}}\",\n layout = \"{{layout}}\",\n accent = \"{{accent}}\",\n showFooter = {{showFooter}},\n}) {\n const regionBox = { background: \"#24143008\", borderRadius: 6, padding: 8, flex: 1, textAlign: \"center\" };\n return (\n <div role=\"img\" aria-label={`${pageTitle}, ${layout} layout`} style={{ font: \"11px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontSize: 13, fontWeight: 700 }}>{pageTitle}</p>\n <div style={{ padding: 8, borderRadius: 6, textAlign: \"center\", fontWeight: 600, background: accent, marginBottom: 6 }}>header</div>\n <div style={{ display: \"flex\", gap: 6, minHeight: 70 }}>\n {layout === \"sidebar\" && <div style={{ background: \"#24143014\", borderRadius: 6, padding: 8, width: 60, textAlign: \"center\" }}>nav</div>}\n {(layout === \"sidebar\" || layout === \"full-width\" || layout === \"split\") && <div style={regionBox}>content</div>}\n {layout === \"split\" && <div style={regionBox}>content</div>}\n </div>\n {showFooter && <div style={{ marginTop: 6, padding: 8, borderRadius: 6, background: \"#24143014\", textAlign: \"center\" }}>footer</div>}\n </div>\n );\n}" }