Edit Timeline View

Name

Also known as (comma separated)

Brief definition Time-oriented visual schedule.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Project phases" }, { "id": "rangeLabel", "type": "text", "label": "Range label", "default": "Q3 2026" }, { "id": "density", "type": "select", "label": "Density", "default": "Comfortable", "options": [ "Comfortable", "Compact" ] }, { "id": "showLabels", "type": "toggle", "label": "Show phase labels", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#D9C8F0", "#F5C2E0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tl\" data-density=\"{{density}}\" style=\"width:480px;\">\n <div class=\"tl__head\">\n <h3 class=\"tl__title\">{{title}}</h3>\n <span class=\"tl__range\">{{rangeLabel}}</span>\n </div>\n <div class=\"tl__track\">\n <span class=\"tl__bar tl__bar--a\" style=\"background:{{accent}};\">{{#if showLabels}}Discovery{{/if}}</span>\n <span class=\"tl__bar tl__bar--b\" style=\"background:#D9C8F0;\">{{#if showLabels}}Build{{/if}}</span>\n <span class=\"tl__bar tl__bar--c\" style=\"background:#F5C2E0;\">{{#if showLabels}}Launch{{/if}}</span>\n </div>\n</div>\n<style>\n.tl { font: 13px/1.3 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; box-sizing: border-box; }\n.tl__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }\n.tl__title { margin: 0; font-size: 15px; font-weight: 700; }\n.tl__range { font-size: 12px; color: #24143099; }\n.tl__track { position: relative; height: 60px; background: #24143010; border-radius: 8px; }\n.tl[data-density=\"Compact\"] .tl__track { height: 40px; }\n.tl__bar { position: absolute; top: 10px; height: 40px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-weight: 700; color: #14351f; font-size: 12px; box-sizing: border-box; overflow: hidden; white-space: nowrap; }\n.tl[data-density=\"Compact\"] .tl__bar { top: 5px; height: 30px; }\n.tl__bar--a { left: 2%; width: 26%; }\n.tl__bar--b { left: 30%; width: 40%; }\n.tl__bar--c { left: 72%; width: 26%; }\n</style>", "tailwind": "<div class=\"tl-tw w-[480px] p-[18px] rounded-xl box-border font-sans text-[13px] text-[#241430] bg-[#FAF7F2]\" data-density=\"{{density}}\">\n <div class=\"flex items-baseline justify-between mb-3.5\">\n <h3 class=\"m-0 text-[15px] font-bold\">{{title}}</h3>\n <span class=\"text-xs text-[#241430]/60\">{{rangeLabel}}</span>\n </div>\n <div class=\"relative h-[60px] bg-[#24143010] rounded-lg tl-tw-track\">\n <span class=\"tl-tw-bar absolute top-2.5 h-10 left-[2%] w-[26%] rounded-md flex items-center px-2.5 font-bold text-[#14351f] text-xs box-border overflow-hidden whitespace-nowrap\" style=\"background:{{accent}}\">{{#if showLabels}}Discovery{{/if}}</span>\n <span class=\"tl-tw-bar absolute top-2.5 h-10 left-[30%] w-[40%] rounded-md flex items-center px-2.5 font-bold text-[#14351f] text-xs box-border overflow-hidden whitespace-nowrap bg-[#D9C8F0]\">{{#if showLabels}}Build{{/if}}</span>\n <span class=\"tl-tw-bar absolute top-2.5 h-10 left-[72%] w-[26%] rounded-md flex items-center px-2.5 font-bold text-[#14351f] text-xs box-border overflow-hidden whitespace-nowrap bg-[#F5C2E0]\">{{#if showLabels}}Launch{{/if}}</span>\n </div>\n</div>\n<style>\n.tl-tw[data-density=\"Compact\"] .tl-tw-track { height: 40px; }\n.tl-tw[data-density=\"Compact\"] .tl-tw-bar { top: 5px; height: 30px; }\n</style>", "react": "export function TimelineView({\n title = \"{{title}}\",\n rangeLabel = \"{{rangeLabel}}\",\n density = \"{{density}}\",\n showLabels = {{showLabels}},\n accent = \"{{accent}}\",\n}) {\n const compact = density === \"Compact\";\n const trackHeight = compact ? 40 : 60;\n const barTop = compact ? 5 : 10;\n const barHeight = compact ? 30 : 40;\n const bar = { position: \"absolute\", top: barTop, height: barHeight, borderRadius: 6, display: \"flex\", alignItems: \"center\", padding: \"0 10px\", fontWeight: 700, color: \"#14351f\", fontSize: 12, boxSizing: \"border-box\", overflow: \"hidden\", whiteSpace: \"nowrap\" };\n const phases = [\n { name: \"Discovery\", left: \"2%\", width: \"26%\", bg: accent },\n { name: \"Build\", left: \"30%\", width: \"40%\", bg: \"#D9C8F0\" },\n { name: \"Launch\", left: \"72%\", width: \"26%\", bg: \"#F5C2E0\" },\n ];\n return (\n <div style={{ font: \"13px/1.3 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 480, padding: 18, borderRadius: 12, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"baseline\", justifyContent: \"space-between\", marginBottom: 14 }}>\n <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>{title}</h3>\n <span style={{ fontSize: 12, color: \"#24143099\" }}>{rangeLabel}</span>\n </div>\n <div style={{ position: \"relative\", height: trackHeight, background: \"#24143010\", borderRadius: 8 }}>\n {phases.map((p) => (\n <span key={p.name} style={{ ...bar, left: p.left, width: p.width, background: p.bg }}>{showLabels && p.name}</span>\n ))}\n </div>\n </div>\n );\n}" }