Edit Whitespace

Name

Also known as (comma separated)

Brief definition Deliberate empty space.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "spacing", "type": "number", "label": "Generous column spacing", "default": 28, "min": 8, "max": 48, "step": 4 }, { "id": "text", "type": "text", "label": "Card body", "default": "Room to breathe" }, { "id": "accent", "type": "color", "label": "Card colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 8, "min": 0, "max": 20, "step": 2 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ws-wrap\" role=\"img\" aria-label=\"Two identical stacks of cards side by side; the left uses tight fixed spacing, the right uses the adjustable generous spacing\">\n <div class=\"ws-cols\">\n <div class=\"ws-col\">\n <p class=\"ws-label\">tight (8px)</p>\n <div class=\"ws-card\" style=\"background:{{accent}};border-radius:{{radius}}px;margin-bottom:8px;\">{{text}}</div>\n <div class=\"ws-card\" style=\"background:{{accent}};border-radius:{{radius}}px;margin-bottom:8px;\">{{text}}</div>\n <div class=\"ws-card\" style=\"background:{{accent}};border-radius:{{radius}}px;\">{{text}}</div>\n </div>\n <div class=\"ws-col\">\n <p class=\"ws-label\">generous ({{spacing}}px)</p>\n <div class=\"ws-card\" style=\"background:{{accent}};border-radius:{{radius}}px;margin-bottom:{{spacing}}px;\">{{text}}</div>\n <div class=\"ws-card\" style=\"background:{{accent}};border-radius:{{radius}}px;margin-bottom:{{spacing}}px;\">{{text}}</div>\n <div class=\"ws-card\" style=\"background:{{accent}};border-radius:{{radius}}px;\">{{text}}</div>\n </div>\n </div>\n</div>\n<style>\n.ws-wrap { font: 12px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.ws-cols { display: flex; gap: 16px; }\n.ws-col { flex: 1; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }\n.ws-label { margin: 0 0 8px; font-size: 11px; color: #241430aa; }\n.ws-card { padding: 10px; font-weight: 600; font-size: 11px; box-sizing: border-box; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[320px]\" role=\"img\" aria-label=\"Two identical stacks of cards side by side; the left uses tight fixed spacing, the right uses the adjustable generous spacing\">\n <div class=\"flex gap-4\">\n <div class=\"flex-1 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border\">\n <p class=\"m-0 mb-2 text-[11px] text-[#241430aa]\">tight (8px)</p>\n <div class=\"p-2.5 font-semibold text-[11px] box-border mb-2\" style=\"background:{{accent}};border-radius:{{radius}}px;\">{{text}}</div>\n <div class=\"p-2.5 font-semibold text-[11px] box-border mb-2\" style=\"background:{{accent}};border-radius:{{radius}}px;\">{{text}}</div>\n <div class=\"p-2.5 font-semibold text-[11px] box-border\" style=\"background:{{accent}};border-radius:{{radius}}px;\">{{text}}</div>\n </div>\n <div class=\"flex-1 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border\">\n <p class=\"m-0 mb-2 text-[11px] text-[#241430aa]\">generous ({{spacing}}px)</p>\n <div class=\"p-2.5 font-semibold text-[11px] box-border\" style=\"background:{{accent}};border-radius:{{radius}}px;margin-bottom:{{spacing}}px;\">{{text}}</div>\n <div class=\"p-2.5 font-semibold text-[11px] box-border\" style=\"background:{{accent}};border-radius:{{radius}}px;margin-bottom:{{spacing}}px;\">{{text}}</div>\n <div class=\"p-2.5 font-semibold text-[11px] box-border\" style=\"background:{{accent}};border-radius:{{radius}}px;\">{{text}}</div>\n </div>\n </div>\n</div>", "react": "export function Whitespace({\n spacing = {{spacing}},\n text = \"{{text}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n}) {\n const col = { flex: 1, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\" };\n const label = { margin: \"0 0 8px\", fontSize: 11, color: \"#241430aa\" };\n const card = (mb) => ({ background: accent, borderRadius: radius, padding: 10, fontWeight: 600, fontSize: 11, boxSizing: \"border-box\", marginBottom: mb });\n return (\n <div style={{ font: \"12px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"Two identical stacks of cards side by side; the left uses tight fixed spacing, the right uses the adjustable generous spacing\">\n <div style={{ display: \"flex\", gap: 16 }}>\n <div style={col}>\n <p style={label}>tight (8px)</p>\n <div style={card(8)}>{text}</div>\n <div style={card(8)}>{text}</div>\n <div style={card(0)}>{text}</div>\n </div>\n <div style={col}>\n <p style={label}>generous ({spacing}px)</p>\n <div style={card(spacing)}>{text}</div>\n <div style={card(spacing)}>{text}</div>\n <div style={card(0)}>{text}</div>\n </div>\n </div>\n </div>\n );\n}" }