Edit Width

Name

Also known as (comma separated)

Brief definition Element width.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "mode", "type": "select", "label": "Width mode", "default": "px", "options": [ "px", "%", "auto" ] }, { "id": "value", "type": "number", "label": "Value (px or %)", "default": 60, "min": 10, "max": 100, "step": 5 }, { "id": "align", "type": "select", "label": "Container justify-content", "default": "flex-start", "options": [ "flex-start", "center", "flex-end" ] }, { "id": "background", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"wd-wrap\" role=\"img\" aria-label=\"An element's width set in pixels, percent of its container, or auto to fit content, aligned by the container's justify-content\" data-mode=\"{{mode}}\" style=\"--wpx:{{value}}px;--wpct:{{value}}%;\">\n <div class=\"wd-container\" style=\"justify-content:{{align}};\">\n <div class=\"wd-box\" style=\"background:{{background}};\">box</div>\n </div>\n <p class=\"wd-caption\">width: {{value}}{{mode}} &middot; justify-content: {{align}} (container is 300px wide)</p>\n</div>\n<style>\n.wd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.wd-container { width: 300px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; display: flex; }\n.wd-box { border-radius: 6px; padding: 12px 0; text-align: center; font-weight: 700; }\n.wd-wrap[data-mode=\"px\"] .wd-box { width: var(--wpx); }\n.wd-wrap[data-mode=\"%\"] .wd-box { width: var(--wpct); }\n.wd-wrap[data-mode=\"auto\"] .wd-box { width: auto; padding-left: 14px; padding-right: 14px; }\n.wd-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"wd-tw font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"An element's width set in pixels, percent of its container, or auto to fit content, aligned by the container's justify-content\" data-mode=\"{{mode}}\" style=\"--wpx:{{value}}px;--wpct:{{value}}%;\">\n <div class=\"w-[300px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border flex\" style=\"justify-content:{{align}};\">\n <div class=\"wd-tw-box rounded-md py-3 text-center font-bold\" style=\"background:{{background}};\">box</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">width: {{value}}{{mode}} &middot; justify-content: {{align}} (container is 300px wide)</p>\n</div>\n<style>\n.wd-tw[data-mode=\"px\"] .wd-tw-box { width: var(--wpx); }\n.wd-tw[data-mode=\"%\"] .wd-tw-box { width: var(--wpct); }\n.wd-tw[data-mode=\"auto\"] .wd-tw-box { width: auto; padding-left: 14px; padding-right: 14px; }\n</style>", "react": "export function WidthDemo({\n mode = \"{{mode}}\",\n value = {{value}},\n align = \"{{align}}\",\n background = \"{{background}}\",\n}) {\n const boxWidth = mode === \"auto\" ? \"auto\" : `${value}${mode}`;\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"An element's width set in pixels, percent of its container, or auto to fit content, aligned by the container's justify-content\">\n <div style={{ width: 300, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\", display: \"flex\", justifyContent: align }}>\n <div style={{ width: boxWidth, background, borderRadius: 6, padding: mode === \"auto\" ? \"12px 14px\" : \"12px 0\", textAlign: \"center\", fontWeight: 700 }}>\n box\n </div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>width: {value}{mode} &middot; justify-content: {align} (container is 300px wide)</p>\n </div>\n );\n}" }