Assignment Notification

Notification caused by assignment.

html

<article class='assign assign--medium' data-read='false'>
  <span class='assign__icon' aria-hidden='true'></span>
  <div class='assign__body'>
    <p class='assign__text'><strong>Morgan Lee</strong> assigned <strong>Update onboarding docs</strong> to You</p>
    <p class='assign__priority'>Priority: <span class='assign__priority-label'>medium</span></p>
    <time class='assign__time' datetime='2026-08-17T11:05:00'>2026-08-17T11:05:00</time>
  </div>
  
  <span class='assign__dot' aria-hidden='true'></span>
  <span class='sr-only'>Unread</span>
  
</article>
<style>
.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; }
.assign--low { border-left-color: #A8E6C1; }
.assign--medium { border-left-color: #BFD9F2; }
.assign--high { border-left-color: #E8A020; }
.assign__icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; position: relative; background: #24143014; }
.assign__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #241430; }
.assign--low .assign__icon::before { content: '\2193'; }
.assign--medium .assign__icon::before { content: '\2192'; }
.assign--high .assign__icon::before { content: '\2191'; }
.assign__body { flex: 1; }
.assign__text { margin: 0 0 4px; }
.assign__priority { margin: 0 0 4px; font-size: 12px; color: #241430b3; }
.assign__priority-label { text-transform: capitalize; font-weight: 600; }
.assign__time { display: block; font-size: 11px; color: #24143080; }
.assign__dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #b0273e; }
.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; }
</style>

tailwind

<div class='assign-tw assign-tw--medium 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='false'>
  <span class='assign-tw__icon w-[22px] h-[22px] rounded-md flex-shrink-0 bg-[#24143014] relative' aria-hidden='true'></span>
  <div class='flex-1'>
    <p class='m-0 mb-1'><strong>Morgan Lee</strong> assigned <strong>Update onboarding docs</strong> to You</p>
    <p class='m-0 mb-1 text-xs text-[#241430]/70'>Priority: <span class='capitalize font-semibold'>medium</span></p>
    <time class='block text-[11px] text-[#241430]/50' datetime='2026-08-17T11:05:00'>2026-08-17T11:05:00</time>
  </div>
  
  <span class='absolute top-3.5 right-3.5 w-2 h-2 rounded-full bg-[#b0273e]' aria-hidden='true'></span>
  <span class='sr-only'>Unread</span>
  
</div>
<style>
.assign-tw--low { border-left-color: #A8E6C1; }
.assign-tw--medium { border-left-color: #BFD9F2; }
.assign-tw--high { border-left-color: #E8A020; }
.assign-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #241430; }
.assign-tw--low .assign-tw__icon::before { content: '\2193'; }
.assign-tw--medium .assign-tw__icon::before { content: '\2192'; }
.assign-tw--high .assign-tw__icon::before { content: '\2191'; }
.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; }
</style>

react

export function AssignmentNotification({
  assigner = 'Morgan Lee',
  task = 'Update onboarding docs',
  assignee = 'You',
  priority = 'medium',
  timestamp = '2026-08-17T11:05:00',
  read = false,
}) {
  const border = { low: '#A8E6C1', medium: '#BFD9F2', high: '#E8A020' }[priority] ?? '#BFD9F2';
  const icon = { low: '\u2193', medium: '\u2192', high: '\u2191' }[priority] ?? '\u2192';
  const srOnly = { position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 };
  return (
    <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}` }}>
      <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>
      <div style={{ flex: 1 }}>
        <p style={{ margin: '0 0 4px' }}><strong>{assigner}</strong> assigned <strong>{task}</strong> to {assignee}</p>
        <p style={{ margin: '0 0 4px', fontSize: 12, color: '#241430b3' }}>Priority: <span style={{ textTransform: 'capitalize', fontWeight: 600 }}>{priority}</span></p>
        <time style={{ display: 'block', fontSize: 11, color: '#24143080' }} dateTime={timestamp}>{timestamp}</time>
      </div>
      {!read && (
        <>
          <span aria-hidden='true' style={{ position: 'absolute', top: 14, right: 14, width: 8, height: 8, borderRadius: '50%', background: '#b0273e' }} />
          <span style={srOnly}>Unread</span>
        </>
      )}
    </article>
  );
}