Timeline
A vertical sequence of events with markers, titles, times and content.
Order history
- Delivered
Left at the front door.
- Out for delivery
- Order placed
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/timeline.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.