Edit Font Weight

Name

Also known as (comma separated)

Brief definition Text thickness.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "weight", "type": "select", "label": "font-weight", "default": "700", "options": [ "400", "600", "800" ] }, { "id": "text", "type": "text", "label": "Sample text", "default": "Weighted differently" }, { "id": "size", "type": "number", "label": "Font size", "default": 24, "min": 14, "max": 36, "step": 2 }, { "id": "color", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#E8A020", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fw-wrap\">\n <p class=\"fw-text\" style=\"font-weight:{{weight}};font-size:{{size}}px;color:{{color}};\">{{text}}</p>\n <p class=\"fw-caption\">font-weight: {{weight}}</p>\n</div>\n<style>\n.fw-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 300px; }\n.fw-text { margin: 0; }\n.fw-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\" style=\"font-weight:{{weight}};font-size:{{size}}px;color:{{color}};\">{{text}}</p>\n <p class=\"mt-3 text-xs text-[#241430]/80\">font-weight: {{weight}}</p>\n</div>", "react": "export function FontWeight({\n weight = \"{{weight}}\",\n text = \"{{text}}\",\n size = {{size}},\n color = \"{{color}}\",\n}) {\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", width: 300 }}>\n <p style={{ margin: 0, fontWeight: Number(weight), fontSize: size, color }}>{text}</p>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>font-weight: {weight}</p>\n </div>\n );\n}" }