Edit Min/Max Width

Name

Also known as (comma separated)

Brief definition Constraints on element width.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "requested", "type": "number", "label": "Requested width", "default": 260, "min": 40, "max": 340, "step": 10 }, { "id": "min", "type": "number", "label": "min-width", "default": 120, "min": 40, "max": 340, "step": 10 }, { "id": "max", "type": "number", "label": "max-width", "default": 220, "min": 40, "max": 340, "step": 10 }, { "id": "background", "type": "color", "label": "Colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mw-wrap\" role=\"img\" aria-label=\"A box asking for one width but clamped by min-width and max-width; the rendered width is never outside that range\">\n <div class=\"mw-track\">\n <div class=\"mw-box\" style=\"width:{{requested}}px;min-width:{{min}}px;max-width:{{max}}px;background:{{background}};\">box</div>\n </div>\n <p class=\"mw-caption\">requested {{requested}}px &middot; min-width {{min}}px &middot; max-width {{max}}px &mdash; the browser clamps automatically</p>\n</div>\n<style>\n.mw-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 340px; }\n.mw-track { background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; }\n.mw-box { padding: 14px; border-radius: 6px; font-weight: 700; text-align: center; box-sizing: border-box; }\n.mw-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[340px]\" role=\"img\" aria-label=\"A box asking for one width but clamped by min-width and max-width; the rendered width is never outside that range\">\n <div class=\"bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border\">\n <div class=\"rounded-md p-3.5 font-bold text-center box-border\" style=\"width:{{requested}}px;min-width:{{min}}px;max-width:{{max}}px;background:{{background}};\">box</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">requested {{requested}}px &middot; min-width {{min}}px &middot; max-width {{max}}px &mdash; the browser clamps automatically</p>\n</div>", "react": "export function MinMaxWidth({\n requested = {{requested}},\n min = {{min}},\n max = {{max}},\n background = \"{{background}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 340 }}\n role=\"img\" aria-label=\"A box asking for one width but clamped by min-width and max-width; the rendered width is never outside that range\">\n <div style={{ background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 12, boxSizing: \"border-box\" }}>\n <div style={{ width: requested, minWidth: min, maxWidth: max, background, borderRadius: 6, padding: 14, fontWeight: 700, textAlign: \"center\", boxSizing: \"border-box\" }}>\n box\n </div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n requested {requested}px &middot; min-width {min}px &middot; max-width {max}px &mdash; the browser clamps automatically\n </p>\n </div>\n );\n}" }