Edit Height

Name

Also known as (comma separated)

Brief definition Element height.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "mode", "type": "select", "label": "Height mode", "default": "px", "options": [ "px", "%", "auto" ] }, { "id": "value", "type": "number", "label": "Value (px or %)", "default": 90, "min": 10, "max": 100, "step": 5 }, { "id": "background", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ht-wrap\" role=\"img\" aria-label=\"An element's height set in pixels, percent of its container, or auto to fit content\" data-mode=\"{{mode}}\" style=\"--hpx:{{value}}px;--hpct:{{value}}%;\">\n <div class=\"ht-container\">\n <div class=\"ht-box\" style=\"background:{{background}};\">box</div>\n </div>\n <p class=\"ht-caption\">height: {{value}}{{mode}} (container is 200px tall)</p>\n</div>\n<style>\n.ht-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.ht-container { height: 200px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; display: flex; }\n.ht-box { width: 120px; border-radius: 6px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-weight: 700; }\n.ht-wrap[data-mode=\"px\"] .ht-box { height: var(--hpx); }\n.ht-wrap[data-mode=\"%\"] .ht-box { height: var(--hpct); }\n.ht-wrap[data-mode=\"auto\"] .ht-box { height: auto; padding: 14px 8px; }\n.ht-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"ht-tw font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"An element's height set in pixels, percent of its container, or auto to fit content\" data-mode=\"{{mode}}\" style=\"--hpx:{{value}}px;--hpct:{{value}}%;\">\n <div class=\"h-[200px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border flex\">\n <div class=\"ht-tw-box w-[120px] rounded-md flex items-start justify-center pt-2 font-bold\" style=\"background:{{background}};\">box</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">height: {{value}}{{mode}} (container is 200px tall)</p>\n</div>\n<style>\n.ht-tw[data-mode=\"px\"] .ht-tw-box { height: var(--hpx); }\n.ht-tw[data-mode=\"%\"] .ht-tw-box { height: var(--hpct); }\n.ht-tw[data-mode=\"auto\"] .ht-tw-box { height: auto; padding-top: 14px; padding-bottom: 14px; }\n</style>", "react": "export function HeightDemo({\n mode = \"{{mode}}\",\n value = {{value}},\n background = \"{{background}}\",\n}) {\n const boxHeight = 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 height set in pixels, percent of its container, or auto to fit content\">\n <div style={{ height: 200, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\", display: \"flex\" }}>\n <div style={{ width: 120, background, borderRadius: 6, display: \"flex\", alignItems: \"flex-start\", justifyContent: \"center\",\n padding: mode === \"auto\" ? \"14px 8px\" : \"8px 0 0\", fontWeight: 700, height: boxHeight }}>\n box\n </div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>height: {value}{mode} (container is 200px tall)</p>\n </div>\n );\n}" }