timeline-item

One event in a timeline: title, time, marker and details.

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>

Props

PropRequiredDefaultOptions
titleyes
timenull
datetimenull
iconnull
tone"neutral"neutral, brand, info, success, warning, danger

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

Other stacks

React and Vue: import { TimelineItem } 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>