Edit Overflow

Name

Also known as (comma separated)

Brief definition Controls overflowing content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "overflow", "type": "select", "label": "overflow", "default": "hidden", "options": [ "visible", "hidden", "scroll", "auto" ] }, { "id": "height", "type": "number", "label": "Container height", "default": 90, "min": 50, "max": 140, "step": 10 }, { "id": "longContent", "type": "toggle", "label": "Content taller than container", "default": true }, { "id": "background", "type": "color", "label": "Container colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ov-wrap\" role=\"img\" aria-label=\"A fixed-height container whose overflow property decides what happens to content taller than it\">\n <div class=\"ov-box\" style=\"height:{{height}}px;overflow:{{overflow}};background:{{background}};\">\n <p class=\"ov-text\">Short line one.{{#if longContent}} And a second sentence. And a third sentence, long enough to push past the container's fixed height so overflow has something to do.{{/if}}</p>\n </div>\n <p class=\"ov-caption\">overflow: {{overflow}} &middot; height {{height}}px</p>\n</div>\n<style>\n.ov-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.ov-box { width: 100%; border-radius: 8px; padding: 10px; box-sizing: border-box; border: 1.5px solid #24143033; }\n.ov-text { margin: 0; font-weight: 600; }\n.ov-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"A fixed-height container whose overflow property decides what happens to content taller than it\">\n <div class=\"w-full rounded-lg p-2.5 box-border border-[1.5px] border-[#24143033]\" style=\"height:{{height}}px;overflow:{{overflow}};background:{{background}};\">\n <p class=\"m-0 font-semibold\">Short line one.{{#if longContent}} And a second sentence. And a third sentence, long enough to push past the container's fixed height so overflow has something to do.{{/if}}</p>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">overflow: {{overflow}} &middot; height {{height}}px</p>\n</div>", "react": "export function OverflowDemo({\n overflow = \"{{overflow}}\",\n height = {{height}},\n longContent = {{longContent}},\n background = \"{{background}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A fixed-height container whose overflow property decides what happens to content taller than it\">\n <div style={{ width: \"100%\", height, overflow, background, borderRadius: 8, padding: 10, boxSizing: \"border-box\", border: \"1.5px solid #24143033\" }}>\n <p style={{ margin: 0, fontWeight: 600 }}>\n Short line one.{longContent && \" And a second sentence. And a third sentence, long enough to push past the container's fixed height so overflow has something to do.\"}\n </p>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>overflow: {overflow} &middot; height {height}px</p>\n </div>\n );\n}" }