← Issue

Edit Issue

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<article class=\"issue\" aria-label=\"Issue {{id}}: {{title}}\">\n  <span class=\"issue__id\">{{id}}</span>\n  <span class=\"issue__type issue__type--{{type}}\">\n    <span class=\"issue__icon issue__icon--bug\" 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=\"9\" r=\"4\"></circle><path d=\"M8 5V3M5 4 4 3M11 4l1-1M4 9H2M14 9h-2M5 13l-1 1M11 13l1 1\"></path></svg></span>\n    <span class=\"issue__icon issue__icon--task\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\"></rect><path d=\"M5 8.5 7 10.5 11 6\"></path></svg></span>\n    <span class=\"issue__icon issue__icon--improvement\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 12l4-4 3 3 5-6\"></path><path d=\"M11 4h3v3\"></path></svg></span>\n    <span class=\"issue__type-label\">{{type}}</span>\n  </span>\n  <h3 class=\"issue__title\">{{title}}</h3>\n  <p class=\"issue__assignee\">Assigned to {{assignee}}</p>\n  {{#if resolved}}<span class=\"issue__status issue__status--resolved\"><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>Resolved</span>{{/if}}\n  {{#unless resolved}}<span class=\"issue__status issue__status--open\"><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=\"M8 4.5v4.2M8 11.5v.1\"></path></svg>Open</span>{{/unless}}\n</article>\n<style>\n.issue { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 540px; padding: 16px 18px; border-radius: 12px; background: #FAF7F2; border: 1px solid #24143022; font: 14px/1.4 system-ui, sans-serif; color: #241430; box-sizing: border-box; }\n.issue__id { font: 700 12px/1 ui-monospace, monospace; color: #241430; background: #24143012; padding: 4px 8px; border-radius: 6px; }\n.issue__type { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 600 12px/1 system-ui, sans-serif; text-transform: capitalize; }\n.issue__type--bug { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }\n.issue__type--task { background: color-mix(in srgb, #BFD9F2 45%, #FAF7F2); color: #1f4266; }\n.issue__type--improvement { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }\n.issue__icon { display: none; }\n.issue__type--bug .issue__icon--bug, .issue__type--task .issue__icon--task, .issue__type--improvement .issue__icon--improvement { display: inline-flex; }\n.issue__title { flex-basis: 100%; margin: 0; font-weight: 600; font-size: 15px; }\n.issue__assignee { margin: 0; font-size: 13px; color: #241430b3; }\n.issue__status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 12px/1 system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; }\n.issue__status--open { background: color-mix(in srgb, #D9C8F0 45%, #FAF7F2); color: #4a3a68; }\n.issue__status--resolved { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }\n</style>",
  "tailwind": "<article aria-label=\"Issue {{id}}: {{title}}\" class=\"issue-tw flex flex-wrap items-center gap-x-4 gap-y-2.5 max-w-[540px] p-4 rounded-xl bg-[#FAF7F2] border border-[#24143022] font-sans text-sm text-[#241430] box-border\">\n  <span class=\"font-mono text-[12px] font-bold bg-[#24143012] px-2 py-1 rounded-md\">{{id}}</span>\n  <span class=\"issue-tw__type issue-tw__type--{{type}} inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold capitalize\">\n    <span class=\"issue-tw__icon issue-tw__icon--bug\" 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=\"9\" r=\"4\"></circle><path d=\"M8 5V3M5 4 4 3M11 4l1-1M4 9H2M14 9h-2M5 13l-1 1M11 13l1 1\"></path></svg></span>\n    <span class=\"issue-tw__icon issue-tw__icon--task\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\"></rect><path d=\"M5 8.5 7 10.5 11 6\"></path></svg></span>\n    <span class=\"issue-tw__icon issue-tw__icon--improvement\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 12l4-4 3 3 5-6\"></path><path d=\"M11 4h3v3\"></path></svg></span>\n    <span>{{type}}</span>\n  </span>\n  <h3 class=\"basis-full m-0 font-semibold text-[15px]\">{{title}}</h3>\n  <p class=\"m-0 text-[13px] text-[#241430]/70\">Assigned to {{assignee}}</p>\n  {{#if resolved}}<span class=\"ml-auto inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full bg-[#A8E6C1]/45 text-[#205c37]\"><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>Resolved</span>{{/if}}\n  {{#unless resolved}}<span class=\"ml-auto inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full bg-[#D9C8F0]/45 text-[#4a3a68]\"><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=\"M8 4.5v4.2M8 11.5v.1\"></path></svg>Open</span>{{/unless}}\n</article>\n<style>\n.issue-tw__icon { display: none; }\n.issue-tw__type--bug { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }\n.issue-tw__type--task { background: color-mix(in srgb, #BFD9F2 45%, #FAF7F2); color: #1f4266; }\n.issue-tw__type--improvement { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }\n.issue-tw__type--bug .issue-tw__icon--bug, .issue-tw__type--task .issue-tw__icon--task, .issue-tw__type--improvement .issue-tw__icon--improvement { display: inline-flex; }\n</style>",
  "react": "export function Issue({\n  id = \"{{id}}\",\n  title = \"{{title}}\",\n  type = \"{{type}}\",\n  assignee = \"{{assignee}}\",\n  resolved = {{resolved}},\n}) {\n  const palette = {\n    bug: { 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\"><circle cx=\"8\" cy=\"9\" r=\"4\" /><path d=\"M8 5V3M5 4 4 3M11 4l1-1M4 9H2M14 9h-2M5 13l-1 1M11 13l1 1\" /></svg> },\n    task: { background: \"color-mix(in srgb, #BFD9F2 45%, #FAF7F2)\", color: \"#1f4266\", icon: <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.4\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" /><path d=\"M5 8.5 7 10.5 11 6\" /></svg> },\n    improvement: { 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\"><path d=\"M2 12l4-4 3 3 5-6\" /><path d=\"M11 4h3v3\" /></svg> },\n  }[type] ?? {};\n  return (\n    <article aria-label={\"Issue \" + id + \": \" + title} style={{ display: \"flex\", flexWrap: \"wrap\", alignItems: \"center\", gap: \"10px 16px\", maxWidth: 540, padding: \"16px 18px\", borderRadius: 12, background: \"#FAF7F2\", border: \"1px solid #24143022\", font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", boxSizing: \"border-box\" }}>\n      <span style={{ font: \"700 12px/1 ui-monospace, monospace\", background: \"#24143012\", padding: \"4px 8px\", borderRadius: 6 }}>{id}</span>\n      <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 5, padding: \"4px 9px\", borderRadius: 999, font: \"600 12px/1 system-ui, sans-serif\", textTransform: \"capitalize\", background: palette.background, color: palette.color }}>\n        {palette.icon}\n        <span>{type}</span>\n      </span>\n      <h3 style={{ flexBasis: \"100%\", margin: 0, fontWeight: 600, fontSize: 15 }}>{title}</h3>\n      <p style={{ margin: 0, fontSize: 13, color: \"#241430b3\" }}>Assigned to {assignee}</p>\n      {resolved ? (\n        <span style={{ marginLeft: \"auto\", display: \"inline-flex\", alignItems: \"center\", gap: 5, fontSize: 12, fontWeight: 600, padding: \"4px 9px\", borderRadius: 999, background: \"color-mix(in srgb, #A8E6C1 45%, #FAF7F2)\", color: \"#205c37\" }}>\n          <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          Resolved\n        </span>\n      ) : (\n        <span style={{ marginLeft: \"auto\", display: \"inline-flex\", alignItems: \"center\", gap: 5, fontSize: 12, fontWeight: 600, padding: \"4px 9px\", borderRadius: 999, background: \"color-mix(in srgb, #D9C8F0 45%, #FAF7F2)\", color: \"#4a3a68\" }}>\n          <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=\"M8 4.5v4.2M8 11.5v.1\" /></svg>\n          Open\n        </span>\n      )}\n    </article>\n  );\n}"
}

History