Edit Main Content

Name

Also known as (comma separated)

Brief definition Primary information/task area.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Team activity" }, { "id": "body", "type": "text", "label": "Body", "default": "This is the primary task area of the page — everything else is chrome around it." }, { "id": "padding", "type": "number", "label": "Padding", "default": 20, "min": 8, "max": 36, "step": 4 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mc-demo\">\n <nav class=\"mc-demo__nav\">Nav</nav>\n <main class=\"mc-demo__main\" style=\"padding:{{padding}}px;border-top:3px solid {{accent}};\">\n <h3 class=\"mc-demo__heading\">{{heading}}</h3>\n <p class=\"mc-demo__body\">{{body}}</p>\n </main>\n</div>\n<style>\n.mc-demo { display: flex; height: 150px; font: 14px/1.5 system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }\n.mc-demo__nav { flex: none; width: 64px; background: #241430; color: #FAF7F2cc; font-size: 12px; text-align: center; padding-top: 14px; }\n.mc-demo__main { flex: 1; min-width: 0; background: #FAF7F2; box-sizing: border-box; overflow-y: auto; }\n.mc-demo__heading { margin: 0 0 8px; }\n.mc-demo__body { margin: 0; color: #241430cc; }\n</style>", "tailwind": "<div class=\"flex h-[150px] font-sans text-sm text-[#241430] border border-[#24143022]\">\n <nav class=\"flex-none w-16 bg-[#241430] text-[#FAF7F2]/80 text-xs text-center pt-3.5\">Nav</nav>\n <main class=\"flex-1 min-w-0 bg-[#FAF7F2] box-border overflow-y-auto\" style=\"padding:{{padding}}px;border-top:3px solid {{accent}};\">\n <h3 class=\"m-0 mb-2\">{{heading}}</h3>\n <p class=\"m-0 text-[#241430]/80\">{{body}}</p>\n </main>\n</div>", "react": "export function MainContent({\n heading = \"{{heading}}\",\n body = \"{{body}}\",\n padding = {{padding}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ display: \"flex\", height: 150, fontFamily: \"system-ui, sans-serif\", fontSize: 14, lineHeight: 1.5, color: \"#241430\", border: \"1px solid #24143022\" }}>\n <nav style={{ flex: \"none\", width: 64, background: \"#241430\", color: \"#FAF7F2cc\", fontSize: 12, textAlign: \"center\", paddingTop: 14 }}>Nav</nav>\n <main style={{ flex: 1, minWidth: 0, background: \"#FAF7F2\", boxSizing: \"border-box\", overflowY: \"auto\", padding, borderTop: `3px solid ${accent}` }}>\n <h3 style={{ margin: \"0 0 8px\" }}>{heading}</h3>\n <p style={{ margin: 0, color: \"#241430cc\" }}>{body}</p>\n </main>\n </div>\n );\n}" }