Edit Programme · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<section class=\"programme\" aria-labelledby=\"programme-heading\" style=\"--accent:{{accent}};\">\n  <header class=\"programme__head\">\n    <div>\n      <h3 id=\"programme-heading\" class=\"programme__name\">{{name}}</h3>\n      <p class=\"programme__sponsor\">Sponsored by {{sponsor}}</p>\n    </div>\n    <span class=\"programme__status programme__status--{{status}}\">\n      <span class=\"programme__icon programme__icon--on-track\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><circle cx=\"8\" cy=\"8\" r=\"6.3\"></circle><path d=\"M5.3 8.2 7 9.9l3.6-4\"></path></svg></span>\n      <span class=\"programme__icon programme__icon--at-risk\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M8 2 1.3 14h13.4L8 2z\"></path><path d=\"M8 6.6v3.2\"></path><circle cx=\"8\" cy=\"11.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"></circle></svg></span>\n      <span class=\"programme__icon programme__icon--delayed\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z\"></path><path d=\"M6 6v4M10 6v4\"></path></svg></span>\n      <span class=\"programme__status-label\">{{status}}</span>\n    </span>\n  </header>\n  <p class=\"programme__stat\">{{projectsShown}} projects in this programme</p>\n  <ul class=\"programme__list\" data-count=\"{{projectsShown}}\">\n    <li><span class=\"programme__bullet\"></span>Identity verification revamp <em>&mdash; on track</em></li>\n    <li><span class=\"programme__bullet\"></span>Fraud signals pipeline <em>&mdash; on track</em></li>\n    <li><span class=\"programme__bullet\"></span>Support macro rewrite <em>&mdash; at risk</em></li>\n  </ul>\n</section>\n<style>\n.programme { max-width: 520px; padding: 18px 20px; border-radius: 12px; background: #FAF7F2; border: 1px solid #24143022; box-sizing: border-box; font: 14px/1.4 system-ui, sans-serif; color: #241430; }\n.programme__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 10px; }\n.programme__name { margin: 0; font-size: 16px; font-weight: 700; }\n.programme__sponsor { margin: 2px 0 0; font-size: 12.5px; color: #241430b3; }\n.programme__status { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; text-transform: capitalize; flex-shrink: 0; }\n.programme__icon { display: none; }\n.programme__status--on-track .programme__icon--on-track, .programme__status--at-risk .programme__icon--at-risk, .programme__status--delayed .programme__icon--delayed { display: inline-flex; }\n.programme__status--on-track { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }\n.programme__status--at-risk { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }\n.programme__status--delayed { background: color-mix(in srgb, #F5C2E0 45%, #FAF7F2); color: #7a2f57; }\n.programme__stat { margin: 0 0 10px; font-size: 13px; font-weight: 600; }\n.programme__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n.programme__list[data-count=\"1\"] li:nth-child(n+2) { display: none; }\n.programme__list[data-count=\"2\"] li:nth-child(n+3) { display: none; }\n.programme__list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: #24143008; }\n.programme__list em { font-style: normal; color: #241430b3; margin-left: 4px; }\n.programme__bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }\n</style>",
  "tailwind": "<section aria-labelledby=\"programme-heading-tw\" class=\"max-w-[520px] p-4.5 rounded-xl bg-[#FAF7F2] border border-[#24143022] box-border font-sans text-sm text-[#241430]\" style=\"--accent:{{accent}};\">\n  <header class=\"flex items-start justify-between gap-2.5 border-l-[3px] pl-2.5 mb-2.5\" style=\"border-color:{{accent}}\">\n    <div>\n      <h3 id=\"programme-heading-tw\" class=\"m-0 text-base font-bold\">{{name}}</h3>\n      <p class=\"m-0 mt-0.5 text-[12.5px] text-[#241430]/70\">Sponsored by {{sponsor}}</p>\n    </div>\n    <span class=\"programme-tw__status programme-tw__status--{{status}} inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full capitalize flex-shrink-0\">\n      <span class=\"programme-tw__icon programme-tw__icon--on-track\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><circle cx=\"8\" cy=\"8\" r=\"6.3\"></circle><path d=\"M5.3 8.2 7 9.9l3.6-4\"></path></svg></span>\n      <span class=\"programme-tw__icon programme-tw__icon--at-risk\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M8 2 1.3 14h13.4L8 2z\"></path><path d=\"M8 6.6v3.2\"></path><circle cx=\"8\" cy=\"11.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"></circle></svg></span>\n      <span class=\"programme-tw__icon programme-tw__icon--delayed\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z\"></path><path d=\"M6 6v4M10 6v4\"></path></svg></span>\n      <span>{{status}}</span>\n    </span>\n  </header>\n  <p class=\"m-0 mb-2.5 text-[13px] font-semibold\">{{projectsShown}} projects in this programme</p>\n  <ul class=\"programme-tw__list list-none m-0 p-0 flex flex-col gap-2\" data-count=\"{{projectsShown}}\">\n    <li class=\"flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]\"><span class=\"w-2 h-2 rounded-full flex-shrink-0\" style=\"background:{{accent}}\"></span>Identity verification revamp <em class=\"not-italic text-[#241430]/70 ml-1\">&mdash; on track</em></li>\n    <li class=\"flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]\"><span class=\"w-2 h-2 rounded-full flex-shrink-0\" style=\"background:{{accent}}\"></span>Fraud signals pipeline <em class=\"not-italic text-[#241430]/70 ml-1\">&mdash; on track</em></li>\n    <li class=\"flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]\"><span class=\"w-2 h-2 rounded-full flex-shrink-0\" style=\"background:{{accent}}\"></span>Support macro rewrite <em class=\"not-italic text-[#241430]/70 ml-1\">&mdash; at risk</em></li>\n  </ul>\n</section>\n<style>\n.programme-tw__icon { display: none; }\n.programme-tw__status--on-track .programme-tw__icon--on-track, .programme-tw__status--at-risk .programme-tw__icon--at-risk, .programme-tw__status--delayed .programme-tw__icon--delayed { display: inline-flex; }\n.programme-tw__status--on-track { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }\n.programme-tw__status--at-risk { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }\n.programme-tw__status--delayed { background: color-mix(in srgb, #F5C2E0 45%, #FAF7F2); color: #7a2f57; }\n.programme-tw__list[data-count=\"1\"] li:nth-child(n+2) { display: none; }\n.programme-tw__list[data-count=\"2\"] li:nth-child(n+3) { display: none; }\n</style>",
  "react": "export function Programme({\n  name = \"{{name}}\",\n  status = \"{{status}}\",\n  projectsShown = {{projectsShown}},\n  sponsor = \"{{sponsor}}\",\n  accent = \"{{accent}}\",\n}) {\n  const projects = [\n    { label: \"Identity verification revamp\", note: \"on track\" },\n    { label: \"Fraud signals pipeline\", note: \"on track\" },\n    { label: \"Support macro rewrite\", note: \"at risk\" },\n  ].slice(0, projectsShown);\n  const palette = {\n    \"on-track\": { background: \"color-mix(in srgb, #A8E6C1 45%, #FAF7F2)\", color: \"#205c37\", icon: <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.4\"><circle cx=\"8\" cy=\"8\" r=\"6.3\" /><path d=\"M5.3 8.2 7 9.9l3.6-4\" /></svg> },\n    \"at-risk\": { background: \"color-mix(in srgb, #E8A020 25%, #FAF7F2)\", color: \"#7a5410\", icon: <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.4\"><path d=\"M8 2 1.3 14h13.4L8 2z\" /><path d=\"M8 6.6v3.2\" /><circle cx=\"8\" cy=\"11.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\" /></svg> },\n    delayed: { background: \"color-mix(in srgb, #F5C2E0 45%, #FAF7F2)\", color: \"#7a2f57\", icon: <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.4\"><path d=\"M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z\" /><path d=\"M6 6v4M10 6v4\" /></svg> },\n  }[status] ?? {};\n  return (\n    <section aria-labelledby=\"programme-heading-react\" style={{ maxWidth: 520, padding: \"18px 20px\", borderRadius: 12, background: \"#FAF7F2\", border: \"1px solid #24143022\", boxSizing: \"border-box\", font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\" }}>\n      <header style={{ display: \"flex\", alignItems: \"flex-start\", justifyContent: \"space-between\", gap: 10, borderLeft: \"3px solid \" + accent, paddingLeft: 10, marginBottom: 10 }}>\n        <div>\n          <h3 id=\"programme-heading-react\" style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{name}</h3>\n          <p style={{ margin: \"2px 0 0\", fontSize: 12.5, color: \"#241430b3\" }}>Sponsored by {sponsor}</p>\n        </div>\n        <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 5, fontSize: 12, fontWeight: 600, padding: \"4px 9px\", borderRadius: 999, textTransform: \"capitalize\", flexShrink: 0, background: palette.background, color: palette.color }}>\n          {palette.icon}\n          <span>{status}</span>\n        </span>\n      </header>\n      <p style={{ margin: \"0 0 10px\", fontSize: 13, fontWeight: 600 }}>{projectsShown} projects in this programme</p>\n      <ul style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        {projects.map((p) => (\n          <li key={p.label} style={{ display: \"flex\", alignItems: \"center\", gap: 8, fontSize: 13.5, padding: \"8px 10px\", borderRadius: 8, background: \"#24143008\" }}>\n            <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: accent, flexShrink: 0 }} />\n            {p.label}\n            <em style={{ fontStyle: \"normal\", color: \"#241430b3\", marginLeft: 4 }}>&mdash; {p.note}</em>\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n}"
}