Edit Line Height

Name

Also known as (comma separated)

Brief definition Vertical spacing between lines.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "lineHeight", "type": "number", "label": "line-height", "default": 1.6, "min": 1, "max": 2.4, "step": 0.2 }, { "id": "fontSize", "type": "number", "label": "Font size", "default": 15, "min": 12, "max": 22, "step": 1 }, { "id": "text", "type": "text", "label": "Paragraph", "default": "Line height controls the vertical space between lines of wrapped text, and it changes how easy a paragraph is to read." }, { "id": "background", "type": "color", "label": "Highlight colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lh-wrap\">\n <p class=\"lh-text\" style=\"line-height:{{lineHeight}};font-size:{{fontSize}}px;background:{{background}}55;\">{{text}}</p>\n <p class=\"lh-caption\">line-height: {{lineHeight}}</p>\n</div>\n<style>\n.lh-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 300px; }\n.lh-text { margin: 0; padding: 8px; border-radius: 6px; }\n.lh-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\">\n <p class=\"m-0 p-2 rounded-md\" style=\"line-height:{{lineHeight}};font-size:{{fontSize}}px;background:{{background}}55;\">{{text}}</p>\n <p class=\"mt-3 text-xs text-[#241430]/80\">line-height: {{lineHeight}}</p>\n</div>", "react": "export function LineHeight({\n lineHeight = {{lineHeight}},\n fontSize = {{fontSize}},\n text = \"{{text}}\",\n background = \"{{background}}\",\n}) {\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", width: 300 }}>\n <p style={{ margin: 0, padding: 8, borderRadius: 6, lineHeight, fontSize, background: `${background}55` }}>{text}</p>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>line-height: {lineHeight}</p>\n </div>\n );\n}" }