Mention Notification

Notification caused by a mention.

html

<article class="mn mn--unread" style="--accent:#F5C2E0;" role="article">
  <span class="mn__avatar" aria-hidden="true">@</span>
  <div class="mn__body">
    <p class="mn__line"><strong>Priya Nair</strong> mentioned you in the Q3 roadmap doc</p>
    <time class="mn__time" datetime="2026-08-18T14:32:00">Today at 2:32 PM</time>
  </div>
  <span class="mn__dot" aria-label="Unread"></span>
</article>
<style>
.mn { display: flex; align-items: flex-start; gap: 10px; width: 300px; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; background: #FAF7F2; border: 1px solid #24143014; font: 13.5px/1.4 system-ui, sans-serif; color: #241430; }
.mn--unread { background: #fff; box-shadow: 0 2px 10px rgba(36,20,48,.08); }
.mn__avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); font-weight: 700; }
.mn__body { flex: 1; min-width: 0; }
.mn__line { margin: 0; }
.mn__time { display: block; margin-top: 4px; font-size: 11px; color: #24143080; }
.mn__dot { width: 8px; height: 8px; border-radius: 50%; background: #B3261E; flex-shrink: 0; margin-top: 5px; }
</style>

tailwind

<article role="article" class="mn-tw mn-tw--unread flex items-start gap-2.5 w-[300px] box-border px-3.5 py-3 rounded-lg bg-[#FAF7F2] border border-[#24143014] font-sans text-[13.5px] text-[#241430]" style="--accent:#F5C2E0">
  <span aria-hidden="true" class="w-7 h-7 rounded-full flex-shrink-0 grid place-items-center font-bold" style="background:#F5C2E0">@</span>
  <div class="flex-1 min-w-0">
    <p class="m-0"><strong>Priya Nair</strong> mentioned you in the Q3 roadmap doc</p>
    <time class="block mt-1 text-[11px] text-[#24143080]" datetime="2026-08-18T14:32:00">Today at 2:32 PM</time>
  </div>
  <span aria-label="Unread" class="w-2 h-2 rounded-full bg-[#B3261E] flex-shrink-0 mt-1.5"></span>
</article>
<style>
.mn-tw--unread { background: #fff; box-shadow: 0 2px 10px rgba(36,20,48,.08); }
</style>

react

export function MentionNotification({
  author = "Priya Nair",
  context = "the Q3 roadmap doc",
  timestamp = "2026-08-18T14:32:00",
  accent = "#F5C2E0",
  unread = true,
}) {
  return (
    <article role="article" style={{ display: "flex", alignItems: "flex-start", gap: 10, width: 300, boxSizing: "border-box", padding: "12px 14px", borderRadius: 10, background: unread ? "#fff" : "#FAF7F2", boxShadow: unread ? "0 2px 10px rgba(36,20,48,.08)" : "none", border: "1px solid #24143014", font: "13.5px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <span aria-hidden="true" style={{ width: 28, height: 28, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: accent, fontWeight: 700 }}>@</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ margin: 0 }}><strong>{author}</strong> mentioned you in {context}</p>
        <time style={{ display: "block", marginTop: 4, fontSize: 11, color: "#24143080" }} dateTime={timestamp}>Today at 2:32 PM</time>
      </div>
      {unread && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: "50%", background: "#B3261E", flexShrink: 0, marginTop: 5 }} />}
    </article>
  );
}