Edit Density

Name

Also known as (comma separated)

Brief definition Amount of information/spacing in a component.

Notes **Visual Design:** Amount of information per area.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "rowLabel", "type": "text", "label": "Row label", "default": "List item" }, { "id": "density", "type": "select", "label": "Density", "default": "comfortable", "options": [ "compact", "comfortable", "spacious" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showDividers", "type": "toggle", "label": "Show dividers", "default": true } ]

Templates (JSON object keyed by format) { "html": "<ul class=\"density density--{{density}}{{#if showDividers}} density--divided{{/if}}\" role=\"img\" aria-label=\"List at {{density}} density\">\n <li class=\"density__row\"><span class=\"density__dot\" style=\"background:{{accent}};\"></span>{{rowLabel}} one</li>\n <li class=\"density__row\"><span class=\"density__dot\" style=\"background:{{accent}};\"></span>{{rowLabel}} two</li>\n <li class=\"density__row\"><span class=\"density__dot\" style=\"background:{{accent}};\"></span>{{rowLabel}} three</li>\n</ul>\n<style>\n.density { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; margin: 0; padding: 8px; border-radius: 12px; list-style: none; box-sizing: border-box; }\n.density__row { display: flex; align-items: center; gap: 10px; }\n.density--divided .density__row { border-bottom: 1px solid #24143015; }\n.density--divided .density__row:last-child { border-bottom: none; }\n.density__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n.density--compact .density__row { padding: 4px 8px; font-size: 12px; }\n.density--comfortable .density__row { padding: 10px 8px; font-size: 14px; }\n.density--spacious .density__row { padding: 18px 8px; font-size: 15px; }\n</style>", "tailwind": "<ul class=\"densitytw densitytw--{{density}}{{#if showDividers}} densitytw--divided{{/if}} font-sans text-[#241430] bg-[#FAF7F2] w-[280px] m-0 p-2 rounded-xl list-none box-border\" role=\"img\" aria-label=\"List at {{density}} density\">\n <li class=\"flex items-center gap-2.5\"><span class=\"w-2 h-2 rounded-full shrink-0\" style=\"background:{{accent}};\"></span>{{rowLabel}} one</li>\n <li class=\"flex items-center gap-2.5\"><span class=\"w-2 h-2 rounded-full shrink-0\" style=\"background:{{accent}};\"></span>{{rowLabel}} two</li>\n <li class=\"flex items-center gap-2.5\"><span class=\"w-2 h-2 rounded-full shrink-0\" style=\"background:{{accent}};\"></span>{{rowLabel}} three</li>\n</ul>\n<style>\n.densitytw--divided li { border-bottom: 1px solid #24143015; }\n.densitytw--divided li:last-child { border-bottom: none; }\n.densitytw--compact li { padding: 4px 8px; font-size: 12px; }\n.densitytw--comfortable li { padding: 10px 8px; font-size: 14px; }\n.densitytw--spacious li { padding: 18px 8px; font-size: 15px; }\n</style>", "react": "export function Density({\n rowLabel = \"{{rowLabel}}\",\n density = \"{{density}}\",\n accent = \"{{accent}}\",\n showDividers = {{showDividers}},\n}) {\n const pad = { compact: \"4px 8px\", comfortable: \"10px 8px\", spacious: \"18px 8px\" }[density];\n const fontSize = { compact: 12, comfortable: 14, spacious: 15 }[density];\n const rowStyle = { display: \"flex\", alignItems: \"center\", gap: 10, padding: pad, fontSize, borderBottom: showDividers ? \"1px solid #24143015\" : \"none\" };\n const dot = <span style={{ width: 8, height: 8, borderRadius: \"50%\", flexShrink: 0, background: accent }} />;\n return (\n <ul role=\"img\" aria-label={`List at ${density} density`} style={{ font: \"14px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 280, margin: 0, padding: 8, borderRadius: 12, listStyle: \"none\", boxSizing: \"border-box\" }}>\n <li style={rowStyle}>{dot}{rowLabel} one</li>\n <li style={rowStyle}>{dot}{rowLabel} two</li>\n <li style={{ ...rowStyle, borderBottom: \"none\" }}>{dot}{rowLabel} three</li>\n </ul>\n );\n}" }