# Timeline

> Event ladder with markers. Vertical (default) or horizontal. Dot colors: primary / success / warning / danger / medium.

Source: https://ngwr.dev/reference/components/timeline

## Installation

```angular-ts
import { WrTimeline, WrTimelineItem } from 'ngwr/timeline';

@Component({ imports: [WrTimeline, WrTimelineItem] })
export class MyComponent {}
```

## Vertical

```angular-html
<wr-timeline>
  <wr-timeline-item title="Created" time="2026-05-01">Initial commit.</wr-timeline-item>
  <wr-timeline-item title="Deployed" time="2026-05-02" color="success">Live.</wr-timeline-item>
</wr-timeline>
```

## Horizontal

```angular-html
<wr-timeline orientation="horizontal">
  <wr-timeline-item title="Plan" time="Q1">Scope agreed.</wr-timeline-item>
  <wr-timeline-item title="Ship" time="Q3" color="success">Released.</wr-timeline-item>
</wr-timeline>
```

## API

`<wr-timeline>` inputs.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `orientation` | Layout direction. | `'vertical' \| 'horizontal'` | `'vertical'` |

## Item API

`<wr-timeline-item>` inputs.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title` | Bold event title. | `string` | `''` |
| `time` | Muted timestamp shown above the title. | `string` | `''` |
| `color` | Dot color. | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'medium'` | `'primary'` |