# timeline — Examples

## Vertical Timeline

```html
<timeline-ui>
  <timeline-item-ui text="Order placed" time="2h ago" status="completed"></timeline-item-ui>
  <timeline-item-ui text="Payment confirmed" time="1h ago" status="completed"></timeline-item-ui>
  <timeline-item-ui text="Processing" status="active"></timeline-item-ui>
  <timeline-item-ui text="Shipped"></timeline-item-ui>
  <timeline-item-ui text="Delivered"></timeline-item-ui>
</timeline-ui>
```

## With Icons

```html
<timeline-ui>
  <timeline-item-ui text="Created" description="Issue opened" icon="plus" status="completed"></timeline-item-ui>
  <timeline-item-ui text="In Review" description="PR submitted" icon="eye" status="active"></timeline-item-ui>
  <timeline-item-ui text="Merged" icon="git-merge"></timeline-item-ui>
  <timeline-item-ui text="Deployed" icon="rocket"></timeline-item-ui>
</timeline-ui>
```

## Horizontal

```html
<timeline-ui orientation="horizontal">
  <timeline-item-ui text="Draft" status="completed"></timeline-item-ui>
  <timeline-item-ui text="Review" status="active"></timeline-item-ui>
  <timeline-item-ui text="Approved"></timeline-item-ui>
  <timeline-item-ui text="Published"></timeline-item-ui>
</timeline-ui>
```
