Edit Fixed Header

Name

Also known as (comma separated)

Brief definition Header positioned independently of normal document flow.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Header title", "default": "Docs" }, { "id": "height", "type": "number", "label": "Header height", "default": 44, "min": 36, "max": 64, "step": 4 }, { "id": "bg", "type": "color", "label": "Background", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "shadow", "type": "toggle", "label": "Drop shadow", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fh-demo\">\n <header class=\"fh-demo__header{{#if shadow}} fh-demo__header--shadow{{/if}}\" style=\"height:{{height}}px;background:{{bg}};\">{{title}}</header>\n <div class=\"fh-demo__scroll\" style=\"padding-top:{{height}}px;\">\n <p>Fixed positioning takes the header out of normal document flow, so it sits on top of content rather than pushing it down.</p>\n <p>Scroll this area and the header stays pinned to the top edge of its positioned container.</p>\n <p>A third line of body copy.</p>\n <p>A fourth line, so the scrollbar actually appears.</p>\n <p>And a fifth to be sure.</p>\n </div>\n</div>\n<style>\n.fh-demo { position: relative; height: 170px; overflow: hidden; border: 1px solid #24143022; font: 13px/1.6 system-ui, sans-serif; color: #241430; }\n.fh-demo__header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; padding: 0 14px; color: #FAF7F2; font-weight: 700; box-sizing: border-box; }\n.fh-demo__header--shadow { box-shadow: 0 4px 10px rgba(36,20,48,.25); }\n.fh-demo__scroll { height: 100%; overflow-y: auto; box-sizing: border-box; padding: 0 14px 14px; background: #FAF7F2; }\n.fh-demo__scroll p { margin: 10px 0 0; color: #241430cc; }\n</style>", "tailwind": "<div class=\"relative h-[170px] overflow-hidden border border-[#24143022] font-sans text-[13px] leading-relaxed text-[#241430]\">\n <header class=\"absolute top-0 left-0 right-0 z-10 flex items-center px-3.5 text-[#FAF7F2] font-bold box-border fh-tw__header{{#if shadow}} fh-tw__header--shadow{{/if}}\" style=\"height:{{height}}px;background:{{bg}};\">{{title}}</header>\n <div class=\"h-full overflow-y-auto box-border px-3.5 pb-3.5 bg-[#FAF7F2]\" style=\"padding-top:{{height}}px;\">\n <p class=\"mt-2.5 text-[#241430]/80\">Fixed positioning takes the header out of normal document flow, so it sits on top of content rather than pushing it down.</p>\n <p class=\"mt-2.5 text-[#241430]/80\">Scroll this area and the header stays pinned to the top edge of its positioned container.</p>\n <p class=\"mt-2.5 text-[#241430]/80\">A third line of body copy.</p>\n <p class=\"mt-2.5 text-[#241430]/80\">A fourth line, so the scrollbar actually appears.</p>\n <p class=\"mt-2.5 text-[#241430]/80\">And a fifth to be sure.</p>\n </div>\n</div>\n<style>\n.fh-tw__header--shadow { box-shadow: 0 4px 10px rgba(36,20,48,.25); }\n</style>", "react": "export function FixedHeader({\n title = \"{{title}}\",\n height = {{height}},\n bg = \"{{bg}}\",\n shadow = {{shadow}},\n}) {\n const lines = [\n \"Fixed positioning takes the header out of normal document flow, so it sits on top of content rather than pushing it down.\",\n \"Scroll this area and the header stays pinned to the top edge of its positioned container.\",\n \"A third line of body copy.\",\n \"A fourth line, so the scrollbar actually appears.\",\n \"And a fifth to be sure.\",\n ];\n return (\n <div style={{ position: \"relative\", height: 170, overflow: \"hidden\", border: \"1px solid #24143022\", fontFamily: \"system-ui, sans-serif\", fontSize: 13, lineHeight: 1.6, color: \"#241430\" }}>\n <header style={{ position: \"absolute\", top: 0, left: 0, right: 0, zIndex: 2, height, background: bg, color: \"#FAF7F2\", display: \"flex\", alignItems: \"center\", padding: \"0 14px\", fontWeight: 700, boxSizing: \"border-box\", boxShadow: shadow ? \"0 4px 10px rgba(36,20,48,.25)\" : \"none\" }}>{title}</header>\n <div style={{ height: \"100%\", overflowY: \"auto\", boxSizing: \"border-box\", padding: `${height}px 14px 14px`, background: \"#FAF7F2\" }}>\n {lines.map((l, i) => <p key={i} style={{ margin: \"10px 0 0\", color: \"#241430cc\" }}>{l}</p>)}\n </div>\n </div>\n );\n}" }