Edit Layout Component

Name

Also known as (comma separated)

Brief definition Controls structure/positioning.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "layoutType", "type": "select", "label": "Layout component", "default": "row", "options": [ "stack", "row", "grid" ] }, { "id": "gap", "type": "number", "label": "Gap (px)", "default": 10, "min": 0, "max": 24, "step": 2 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showBorders", "type": "toggle", "label": "Show child borders", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"layc\">\n <p class=\"layc__name\">&lt;{{layoutType}} gap={{gap}}&gt;</p>\n <div class=\"layc__box layc__box--{{layoutType}}{{#if showBorders}} layc__box--bordered{{/if}}\" style=\"gap:{{gap}}px;\">\n <span class=\"layc__item\" style=\"background:{{accent}};\">A</span>\n <span class=\"layc__item\" style=\"background:{{accent}};\">B</span>\n <span class=\"layc__item\" style=\"background:{{accent}};\">C</span>\n </div>\n</div>\n<style>\n.layc { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.layc__name { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.layc__box { display: flex; box-sizing: border-box; padding: 8px; }\n.layc__box--stack { flex-direction: column; }\n.layc__box--row { flex-direction: row; }\n.layc__box--grid { display: grid; grid-template-columns: repeat(3, 1fr); }\n.layc__box--bordered { border: 1.5px dashed #24143030; border-radius: 8px; }\n.layc__item { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; font-weight: 700; color: #241430; }\n.layc__box--grid .layc__item { width: auto; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">&lt;{{layoutType}} gap={{gap}}&gt;</p>\n <div class=\"layctw layctw--{{layoutType}} flex box-border p-2{{#if showBorders}} border border-dashed border-[#24143030] rounded-lg{{/if}}\" style=\"gap:{{gap}}px;\">\n <span class=\"flex items-center justify-center w-11 h-11 rounded-md font-bold\" style=\"background:{{accent}};\">A</span>\n <span class=\"flex items-center justify-center w-11 h-11 rounded-md font-bold\" style=\"background:{{accent}};\">B</span>\n <span class=\"flex items-center justify-center w-11 h-11 rounded-md font-bold\" style=\"background:{{accent}};\">C</span>\n </div>\n</div>\n<style>\n.layctw--stack { flex-direction: column; }\n.layctw--row { flex-direction: row; }\n.layctw--grid { display: grid; grid-template-columns: repeat(3, 1fr); }\n</style>", "react": "export function LayoutComponent({\n layoutType = \"{{layoutType}}\",\n gap = {{gap}},\n accent = \"{{accent}}\",\n showBorders = {{showBorders}},\n}) {\n const boxStyle = layoutType === \"grid\"\n ? { display: \"grid\", gridTemplateColumns: \"repeat(3,1fr)\", gap }\n : { display: \"flex\", flexDirection: layoutType === \"stack\" ? \"column\" : \"row\", gap };\n const item = { display: \"flex\", alignItems: \"center\", justifyContent: \"center\", width: layoutType === \"grid\" ? \"auto\" : 44, height: 44, borderRadius: 6, fontWeight: 700, background: accent };\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>&lt;{layoutType} gap={gap}&gt;</p>\n <div style={{ ...boxStyle, boxSizing: \"border-box\", padding: 8, border: showBorders ? \"1.5px dashed #24143030\" : \"none\", borderRadius: showBorders ? 8 : 0 }}>\n <span style={item}>A</span>\n <span style={item}>B</span>\n <span style={item}>C</span>\n </div>\n </div>\n );\n}" }