Edit Assignment Notification · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<article class='assign assign--{{priority}}' data-read='{{read}}'>\n  <span class='assign__icon' aria-hidden='true'></span>\n  <div class='assign__body'>\n    <p class='assign__text'><strong>{{assigner}}</strong> assigned <strong>{{task}}</strong> to {{assignee}}</p>\n    <p class='assign__priority'>Priority: <span class='assign__priority-label'>{{priority}}</span></p>\n    <time class='assign__time' datetime='{{timestamp}}'>{{timestamp}}</time>\n  </div>\n  {{#unless read}}\n  <span class='assign__dot' aria-hidden='true'></span>\n  <span class='sr-only'>Unread</span>\n  {{/unless}}\n</article>\n<style>\n.assign { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 14px 16px; background: #FAF7F2; color: #241430; border-radius: 10px; box-shadow: 0 6px 18px rgba(36,20,48,.12); font: 14px/1.5 system-ui, sans-serif; position: relative; box-sizing: border-box; border-left: 4px solid #BFD9F2; }\n.assign--low { border-left-color: #A8E6C1; }\n.assign--medium { border-left-color: #BFD9F2; }\n.assign--high { border-left-color: #E8A020; }\n.assign__icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; position: relative; background: #24143014; }\n.assign__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #241430; }\n.assign--low .assign__icon::before { content: '\\2193'; }\n.assign--medium .assign__icon::before { content: '\\2192'; }\n.assign--high .assign__icon::before { content: '\\2191'; }\n.assign__body { flex: 1; }\n.assign__text { margin: 0 0 4px; }\n.assign__priority { margin: 0 0 4px; font-size: 12px; color: #241430b3; }\n.assign__priority-label { text-transform: capitalize; font-weight: 600; }\n.assign__time { display: block; font-size: 11px; color: #24143080; }\n.assign__dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #b0273e; }\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\n</style>",
  "tailwind": "<div class='assign-tw assign-tw--{{priority}} flex items-start gap-3 max-w-[420px] p-3.5 bg-[#FAF7F2] text-[#241430] rounded-lg shadow-md font-sans text-sm relative box-border border-l-4' data-read='{{read}}'>\n  <span class='assign-tw__icon w-[22px] h-[22px] rounded-md flex-shrink-0 bg-[#24143014] relative' aria-hidden='true'></span>\n  <div class='flex-1'>\n    <p class='m-0 mb-1'><strong>{{assigner}}</strong> assigned <strong>{{task}}</strong> to {{assignee}}</p>\n    <p class='m-0 mb-1 text-xs text-[#241430]/70'>Priority: <span class='capitalize font-semibold'>{{priority}}</span></p>\n    <time class='block text-[11px] text-[#241430]/50' datetime='{{timestamp}}'>{{timestamp}}</time>\n  </div>\n  {{#unless read}}\n  <span class='absolute top-3.5 right-3.5 w-2 h-2 rounded-full bg-[#b0273e]' aria-hidden='true'></span>\n  <span class='sr-only'>Unread</span>\n  {{/unless}}\n</div>\n<style>\n.assign-tw--low { border-left-color: #A8E6C1; }\n.assign-tw--medium { border-left-color: #BFD9F2; }\n.assign-tw--high { border-left-color: #E8A020; }\n.assign-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #241430; }\n.assign-tw--low .assign-tw__icon::before { content: '\\2193'; }\n.assign-tw--medium .assign-tw__icon::before { content: '\\2192'; }\n.assign-tw--high .assign-tw__icon::before { content: '\\2191'; }\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\n</style>",
  "react": "export function AssignmentNotification({\n  assigner = '{{assigner}}',\n  task = '{{task}}',\n  assignee = '{{assignee}}',\n  priority = '{{priority}}',\n  timestamp = '{{timestamp}}',\n  read = {{read}},\n}) {\n  const border = { low: '#A8E6C1', medium: '#BFD9F2', high: '#E8A020' }[priority] ?? '#BFD9F2';\n  const icon = { low: '\\u2193', medium: '\\u2192', high: '\\u2191' }[priority] ?? '\\u2192';\n  const srOnly = { position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 };\n  return (\n    <article style={{ display: 'flex', alignItems: 'flex-start', gap: 12, maxWidth: 420, padding: '14px 16px', background: '#FAF7F2', color: '#241430', borderRadius: 10, boxShadow: '0 6px 18px rgba(36,20,48,.12)', fontFamily: 'system-ui, sans-serif', fontSize: 14, position: 'relative', borderLeft: `4px solid ${border}` }}>\n      <span aria-hidden='true' style={{ width: 22, height: 22, borderRadius: 6, flexShrink: 0, background: '#24143014', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 11 }}>{icon}</span>\n      <div style={{ flex: 1 }}>\n        <p style={{ margin: '0 0 4px' }}><strong>{assigner}</strong> assigned <strong>{task}</strong> to {assignee}</p>\n        <p style={{ margin: '0 0 4px', fontSize: 12, color: '#241430b3' }}>Priority: <span style={{ textTransform: 'capitalize', fontWeight: 600 }}>{priority}</span></p>\n        <time style={{ display: 'block', fontSize: 11, color: '#24143080' }} dateTime={timestamp}>{timestamp}</time>\n      </div>\n      {!read && (\n        <>\n          <span aria-hidden='true' style={{ position: 'absolute', top: 14, right: 14, width: 8, height: 8, borderRadius: '50%', background: '#b0273e' }} />\n          <span style={srOnly}>Unread</span>\n        </>\n      )}\n    </article>\n  );\n}"
}