Notification List Item

name: "Notification List Item"
short_description: A notification row with an actor avatar, message, timestamp, and read/unread state.
long_visual_description: >
  A clickable row with the actor's avatar (or initials) on the leading edge, a message
  naming the actor in bold with the action following, a relative timestamp beneath, and
  an unread dot on the trailing edge. Unread rows carry a subtle raised background.

use_cases:
  - A single row in a notification inbox or center.
  - Activity row when someone comments, likes, follows, or mentions you.
  - Assignment or mention alert in a productivity app.
  - Social interaction notification.
  - System/actor event row in a feed.

recommended_for:
  - Individual rows inside notification-inbox or notification-center.
avoid_for:
  - Actor–verb–object activity with rich object context (use activity-feed-item).
  - Standalone banners or toasts.

markets:
  - Global

example_usage: >
  Precompute actor_initials (the template can't slice the name) and a human relative
  timestamp; set unread to mark unseen rows. The whole row is a link.

props:
  actor: The person or system that triggered the notification.
  actor_initials: 1-2 char avatar fallback, precomputed.
  actor_image: Optional actor photo.
  message: The action text following the actor's name.
  timestamp: A human relative time like "2h ago".
  href: Where the row links.
  unread: Whether the notification is unread.

example_prompts:
  - "Add a notification row: Jane Doe commented on your post, 2h ago, unread."
  - "Add a read notification that Sam Lee started following you."

lifecycle: experimental
content_model: An actor, an action message, a timestamp, and a read/unread state.

theming:
  tokens_used:
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --font-heading
    - --space-card
    - --duration-token

editorial_guidance: >
  Write the message as the verb phrase that follows the actor's name ("commented on your
  post"), not a full sentence repeating the name.

categorization:
  category: Notifications
  subcategory: Center
  atomic_type: molecule
  usage_type: [list-item]
  maturity: ai-generated
  wcag:
    level: AA
    notes: The row is a single link; the avatar carries the actor's name via role="img"/aria-label; the unread dot has an accessible label.
  keyboard_support: The row is focusable and activates on Enter.
  seo_score: 20
  text_direction: both