# ActivityItem

> One event in a feed: who did what to what, and when.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { ActivityItem } from "@rrios-forge/ui/molecules/activity-item";`
- **Source**: `packages/ui/src/molecules/activity-item`

Activity feed row reading 'actor performed action on object — time'. The molecule never invents a sentence; the consumer composes the action and object nodes.

## Use it for

- Notification / timeline / activity item → `NotificationItem` / `TimelineItem` / `ActivityItem`

## Stories

- [Playground](/?path=/story/components-molecules-activityitem--playground) · frame: `/iframe.html?id=components-molecules-activityitem--playground&viewMode=story`
- [With avatar](/?path=/story/components-molecules-activityitem--with-avatar) · frame: `/iframe.html?id=components-molecules-activityitem--with-avatar&viewMode=story`
- [With badge](/?path=/story/components-molecules-activityitem--with-badge) · frame: `/iframe.html?id=components-molecules-activityitem--with-badge&viewMode=story`
- [Activity feed](/?path=/story/components-molecules-activityitem--activity-feed) · frame: `/iframe.html?id=components-molecules-activityitem--activity-feed&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).