timeline

Events in order, each with a time and an optional coloured marker.

Example

  1. Rebuild finished
    12,480 members, 312 more than before.
  2. Sheet export failed
    Quota exceeded. Retrying in 15 minutes.
  3. Segment created by Rina Halim

Laravel

<x-admin::timeline>
    <x-admin::timeline-item title="Rebuild finished" time="09:42" datetime="2026-11-06T09:42" icon="check" tone="success">12,480 members, 312 more than before.</x-admin::timeline-item>
    <x-admin::timeline-item title="Sheet export failed" time="09:15" datetime="2026-11-06T09:15" icon="alert" tone="danger">Quota exceeded. Retrying in 15 minutes.</x-admin::timeline-item>
    <x-admin::timeline-item title="Segment created by Rina Halim" time="Yesterday" />
</x-admin::timeline>

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Timeline } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<ol class="adm-timeline"><li class="adm-timeline__item">
    <span class="adm-timeline__marker adm-timeline__marker--success" aria-hidden="true"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></span>
    <div class="adm-timeline__body">
        <div class="adm-timeline__head">
            <span class="adm-timeline__title">Rebuild finished</span>
            <time class="adm-timeline__time"  datetime="2026-11-06T09:42" >09:42</time>        </div>
        <div class="adm-timeline__text">12,480 members, 312 more than before.</div>    </div>
</li>
    <li class="adm-timeline__item">
    <span class="adm-timeline__marker adm-timeline__marker--danger" aria-hidden="true"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg></span>
    <div class="adm-timeline__body">
        <div class="adm-timeline__head">
            <span class="adm-timeline__title">Sheet export failed</span>
            <time class="adm-timeline__time"  datetime="2026-11-06T09:15" >09:15</time>        </div>
        <div class="adm-timeline__text">Quota exceeded. Retrying in 15 minutes.</div>    </div>
</li>
    <li class="adm-timeline__item">
    <span class="adm-timeline__marker adm-timeline__marker--neutral" aria-hidden="true"></span>
    <div class="adm-timeline__body">
        <div class="adm-timeline__head">
            <span class="adm-timeline__title">Segment created by Rina Halim</span>
            <time class="adm-timeline__time" >Yesterday</time>        </div>
            </div>
</li></ol>