# Timeline · MIAN

A vertical sequence of events with markers, titles, times and content.

- Id: `timeline` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/timeline
- Use for: timeline, order tracking, history, activity log, company history.
- Alternatives: process, steps.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-timeline`: On an <ol>.
- `mn-timeline-marker`: Dot or icon; takes a colour role.
- `mn-timeline-title · mn-timeline-time · mn-timeline-body`: Parts.

## Accessibility

- Use an ordered list and a <time datetime> for each timestamp.

## Examples

### Order history

```html
<ol class="mn-timeline" style="max-width:28rem">
  <li><span class="mn-timeline-marker mn-success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><div><div class="mn-timeline-title">Delivered</div><time class="mn-timeline-time" datetime="2026-09-24T14:10">Today, 14:10</time></div><p class="mn-timeline-body">Left at the front door.</p></li>
  <li><span class="mn-timeline-marker mn-primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9Z"/><path d="m4 7.5 8 4.5 8-4.5M12 12v9"/></svg></span><div><div class="mn-timeline-title">Out for delivery</div><time class="mn-timeline-time" datetime="2026-09-24T08:02">Today, 08:02</time></div></li>
  <li><span class="mn-timeline-marker"></span><div><div class="mn-timeline-title">Order placed</div><time class="mn-timeline-time" datetime="2026-09-22">22 Sep</time></div></li>
</ol>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/timeline/source