# TimelineItem

> One step in a timeline: what happened, who did it and when.

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

<li> with a leading dot (or icon) on a rail. Tone colours only the dot; the body reads in the default content tone (R14). The item owns its rail (dot + hairline to the next item, hidden on the last); the consumer wraps items in a gap-less <ol role="list" className="flex flex-col">.

## Use it for

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

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `info` `success` `warning` `danger` | `neutral` | Which semantic colour family the element speaks in. |

## Stories

- [Playground](/?path=/story/components-molecules-timelineitem--playground) · frame: `/iframe.html?id=components-molecules-timelineitem--playground&viewMode=story`
- [Tones](/?path=/story/components-molecules-timelineitem--tones) · frame: `/iframe.html?id=components-molecules-timelineitem--tones&viewMode=story`
- [With action](/?path=/story/components-molecules-timelineitem--with-action) · frame: `/iframe.html?id=components-molecules-timelineitem--with-action&viewMode=story`
- [Timeline stack](/?path=/story/components-molecules-timelineitem--timeline-stack) · frame: `/iframe.html?id=components-molecules-timelineitem--timeline-stack&viewMode=story`

## Decisions that name it

- ADR-030 — Axis vocabulary: one name, one meaning

## 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).