Data display
Timeline
A vertical list of events in reading order, each with a marker, a title and a time.
| Class name | Type | Description |
|---|---|---|
timelineplf:timeline | Component | An ordered list of events |
timeline-groupplf:timeline-group | Component | Groups timelines under a title |
timeline-group-titleplf:timeline-group-title | Part | The group's title |
timeline-itemplf:timeline-item | Part | One event |
timeline-markerplf:timeline-marker | Part | Holds an icon or avatar; a dot when empty |
timeline-iconplf:timeline-icon | Part | An SVG icon in the marker; an icon class there doesn't need it |
timeline-contentplf:timeline-content | Part | The header, description and detail |
timeline-headerplf:timeline-header | Part | The title and time |
timeline-titleplf:timeline-title | Part | The event's title |
timeline-timeplf:timeline-time | Part | A time element |
timeline-descriptionplf:timeline-description | Part | The description |
timeline-detailplf:timeline-detail | Part | Extra content, such as buttons |
timeline-linkplf:timeline-link | Part | A link in the text |
timeline-marker-primaryplf:timeline-marker-primary | Color | Primary marker |
timeline-marker-successplf:timeline-marker-success | Color | Success marker |
timeline-marker-warningplf:timeline-marker-warning | Color | Warning marker |
timeline-marker-errorplf:timeline-marker-error | Color | Error marker |
timeline-marker-infoplf:timeline-marker-info | Color | Info marker |
timeline-smplf:timeline-sm | Size | Small |
Default
Keep role="list", which Safari drops from a list styled without bullets. The time stays beside its title, which wraps, so keep it short: a time or a short date.
-
Order placed
Order #1024 · 3 items
-
Payment confirmed
Paid with Visa ending 4242.
-
Packed and handed to the carrier
Tracking number PLF-88213.
-
Delivery
Pending. You’ll get an email when it arrives.
<ol class="timeline" role="list" aria-label="Order #1024 progress">
<li class="timeline-item">
<span class="timeline-marker"><span class="icon icon-file-text"></span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Order placed</p>
<time class="timeline-time" datetime="2026-10-08T09:02">8 Oct, 09:02</time>
</div>
<p class="timeline-description">Order #1024 · 3 items</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-success">
<span class="icon icon-credit-card"></span>
</span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Payment confirmed</p>
<time class="timeline-time" datetime="2026-10-08T09:03">8 Oct, 09:03</time>
</div>
<p class="timeline-description">Paid with Visa ending 4242.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-primary"><span class="icon icon-archive"></span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Packed and handed to the carrier</p>
<time class="timeline-time" datetime="2026-10-08T15:40">8 Oct, 15:40</time>
</div>
<p class="timeline-description">Tracking number PLF-88213.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Delivery</p>
<time class="timeline-time" datetime="2026-10-10">Expected 10 Oct</time>
</div>
<p class="timeline-description">Pending. You’ll get an email when it arrives.</p>
</div>
</li>
</ol><ol class="plf:timeline" role="list" aria-label="Order #1024 progress">
<li class="plf:timeline-item">
<span class="plf:timeline-marker"><span class="plf:icon plf:icon-file-text"></span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Order placed</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:02">8 Oct, 09:02</time>
</div>
<p class="plf:timeline-description">Order #1024 · 3 items</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-success">
<span class="plf:icon plf:icon-credit-card"></span>
</span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Payment confirmed</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:03">8 Oct, 09:03</time>
</div>
<p class="plf:timeline-description">Paid with Visa ending 4242.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-primary"><span class="plf:icon plf:icon-archive"></span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Packed and handed to the carrier</p>
<time class="plf:timeline-time" datetime="2026-10-08T15:40">8 Oct, 15:40</time>
</div>
<p class="plf:timeline-description">Tracking number PLF-88213.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Delivery</p>
<time class="plf:timeline-time" datetime="2026-10-10">Expected 10 Oct</time>
</div>
<p class="plf:timeline-description">Pending. You’ll get an email when it arrives.</p>
</div>
</li>
</ol>import { Icon, Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle } from '@pelatform/react';
export function Example() {
return (
<Timeline aria-label="Order #1024 progress">
<TimelineItem>
<TimelineMarker><Icon name="file-text" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Order placed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:02">8 Oct, 09:02</TimelineTime>
</TimelineHeader>
<TimelineDescription>Order #1024 · 3 items</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="success"><Icon name="credit-card" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Payment confirmed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:03">8 Oct, 09:03</TimelineTime>
</TimelineHeader>
<TimelineDescription>Paid with Visa ending 4242.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="primary"><Icon name="archive" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Packed and handed to the carrier</TimelineTitle>
<TimelineTime dateTime="2026-10-08T15:40">8 Oct, 15:40</TimelineTime>
</TimelineHeader>
<TimelineDescription>Tracking number PLF-88213.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Delivery</TimelineTitle>
<TimelineTime dateTime="2026-10-10">Expected 10 Oct</TimelineTime>
</TimelineHeader>
<TimelineDescription>Pending. You’ll get an email when it arrives.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}import { Icon, Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle } from '@pelatform/react/prefixed';
export function Example() {
return (
<Timeline aria-label="Order #1024 progress">
<TimelineItem>
<TimelineMarker><Icon name="file-text" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Order placed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:02">8 Oct, 09:02</TimelineTime>
</TimelineHeader>
<TimelineDescription>Order #1024 · 3 items</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="success"><Icon name="credit-card" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Payment confirmed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:03">8 Oct, 09:03</TimelineTime>
</TimelineHeader>
<TimelineDescription>Paid with Visa ending 4242.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="primary"><Icon name="archive" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Packed and handed to the carrier</TimelineTitle>
<TimelineTime dateTime="2026-10-08T15:40">8 Oct, 15:40</TimelineTime>
</TimelineHeader>
<TimelineDescription>Tracking number PLF-88213.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Delivery</TimelineTitle>
<TimelineTime dateTime="2026-10-10">Expected 10 Oct</TimelineTime>
</TimelineHeader>
<TimelineDescription>Pending. You’ll get an email when it arrives.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}Markers
A dot marker must be empty, without even whitespace.
-
Icon
An SVG icon.
-
Avatar
An Avatar fills the marker.
-
Dot
An empty marker.
<ol class="timeline" role="list" aria-label="Marker kinds">
<li class="timeline-item">
<span class="timeline-marker"><span class="icon icon-check"></span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Icon</p>
<time class="timeline-time" datetime="2026-10-08T09:00">09:00</time>
</div>
<p class="timeline-description">An SVG icon.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker" aria-hidden="true"><span class="avatar avatar-sm">JR</span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Avatar</p>
<time class="timeline-time" datetime="2026-10-08T10:00">10:00</time>
</div>
<p class="timeline-description">An Avatar fills the marker.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Dot</p>
<time class="timeline-time" datetime="2026-10-08T11:00">11:00</time>
</div>
<p class="timeline-description">An empty marker.</p>
</div>
</li>
</ol><ol class="plf:timeline" role="list" aria-label="Marker kinds">
<li class="plf:timeline-item">
<span class="plf:timeline-marker"><span class="plf:icon plf:icon-check"></span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Icon</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:00">09:00</time>
</div>
<p class="plf:timeline-description">An SVG icon.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker" aria-hidden="true"><span class="plf:avatar plf:avatar-sm">JR</span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Avatar</p>
<time class="plf:timeline-time" datetime="2026-10-08T10:00">10:00</time>
</div>
<p class="plf:timeline-description">An Avatar fills the marker.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Dot</p>
<time class="plf:timeline-time" datetime="2026-10-08T11:00">11:00</time>
</div>
<p class="plf:timeline-description">An empty marker.</p>
</div>
</li>
</ol>import { Avatar, Icon, Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle } from '@pelatform/react';
export function Example() {
return (
<Timeline aria-label="Marker kinds">
<TimelineItem>
<TimelineMarker><Icon name="check" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Icon</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:00">09:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>An SVG icon.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">JR</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Avatar</TimelineTitle>
<TimelineTime dateTime="2026-10-08T10:00">10:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>An Avatar fills the marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Dot</TimelineTitle>
<TimelineTime dateTime="2026-10-08T11:00">11:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>An empty marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}import { Avatar, Icon, Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle } from '@pelatform/react/prefixed';
export function Example() {
return (
<Timeline aria-label="Marker kinds">
<TimelineItem>
<TimelineMarker><Icon name="check" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Icon</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:00">09:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>An SVG icon.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">JR</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Avatar</TimelineTitle>
<TimelineTime dateTime="2026-10-08T10:00">10:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>An Avatar fills the marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Dot</TimelineTitle>
<TimelineTime dateTime="2026-10-08T11:00">11:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>An empty marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}Colors
Markers are decorative, so state each status in the title or description.
-
Primary
Primary marker.
-
Success
Success marker.
-
Warning
Warning marker.
-
Error
Error marker.
-
Info
Info marker.
<ol class="timeline" role="list" aria-label="Marker colors">
<li class="timeline-item">
<span class="timeline-marker timeline-marker-primary"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Primary</p>
<time class="timeline-time" datetime="2026-10-08T09:00">09:00</time>
</div>
<p class="timeline-description">Primary marker.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-success"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Success</p>
<time class="timeline-time" datetime="2026-10-08T09:10">09:10</time>
</div>
<p class="timeline-description">Success marker.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-warning"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Warning</p>
<time class="timeline-time" datetime="2026-10-08T09:20">09:20</time>
</div>
<p class="timeline-description">Warning marker.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-error"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Error</p>
<time class="timeline-time" datetime="2026-10-08T09:30">09:30</time>
</div>
<p class="timeline-description">Error marker.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-info"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Info</p>
<time class="timeline-time" datetime="2026-10-08T09:40">09:40</time>
</div>
<p class="timeline-description">Info marker.</p>
</div>
</li>
</ol><ol class="plf:timeline" role="list" aria-label="Marker colors">
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-primary"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Primary</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:00">09:00</time>
</div>
<p class="plf:timeline-description">Primary marker.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-success"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Success</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:10">09:10</time>
</div>
<p class="plf:timeline-description">Success marker.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-warning"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Warning</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:20">09:20</time>
</div>
<p class="plf:timeline-description">Warning marker.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-error"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Error</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:30">09:30</time>
</div>
<p class="plf:timeline-description">Error marker.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-info"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Info</p>
<time class="plf:timeline-time" datetime="2026-10-08T09:40">09:40</time>
</div>
<p class="plf:timeline-description">Info marker.</p>
</div>
</li>
</ol>import {
Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle,
} from '@pelatform/react';
export function Example() {
return (
<Timeline aria-label="Marker colors">
<TimelineItem>
<TimelineMarker color="primary" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Primary</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:00">09:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>Primary marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="success" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Success</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:10">09:10</TimelineTime>
</TimelineHeader>
<TimelineDescription>Success marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="warning" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Warning</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:20">09:20</TimelineTime>
</TimelineHeader>
<TimelineDescription>Warning marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="error" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Error</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:30">09:30</TimelineTime>
</TimelineHeader>
<TimelineDescription>Error marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="info" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Info</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:40">09:40</TimelineTime>
</TimelineHeader>
<TimelineDescription>Info marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}import {
Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle,
} from '@pelatform/react/prefixed';
export function Example() {
return (
<Timeline aria-label="Marker colors">
<TimelineItem>
<TimelineMarker color="primary" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Primary</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:00">09:00</TimelineTime>
</TimelineHeader>
<TimelineDescription>Primary marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="success" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Success</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:10">09:10</TimelineTime>
</TimelineHeader>
<TimelineDescription>Success marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="warning" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Warning</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:20">09:20</TimelineTime>
</TimelineHeader>
<TimelineDescription>Warning marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="error" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Error</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:30">09:30</TimelineTime>
</TimelineHeader>
<TimelineDescription>Error marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="info" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Info</TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:40">09:40</TimelineTime>
</TimelineHeader>
<TimelineDescription>Info marker.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}-
Version 2.4.0
Timeline component and refreshed tokens.
-
Version 2.3.1
Fixes date picker focus clipping.
-
Version 2.3.0
Adds Multi Select Members.
-
Version 2.4.0
Timeline component and refreshed tokens.
-
Version 2.3.1
Fixes date picker focus clipping.
-
Version 2.3.0
Adds Multi Select Members.
<ol class="timeline timeline-sm" role="list" aria-label="Release history">
<li class="timeline-item">
<span class="timeline-marker timeline-marker-primary"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Version 2.4.0</p>
<time class="timeline-time" datetime="2026-10-08">8 Oct 2026</time>
</div>
<p class="timeline-description">Timeline component and refreshed tokens.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Version 2.3.1</p>
<time class="timeline-time" datetime="2026-09-24">24 Sep 2026</time>
</div>
<p class="timeline-description">Fixes date picker focus clipping.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Version 2.3.0</p>
<time class="timeline-time" datetime="2026-09-02">2 Sep 2026</time>
</div>
<p class="timeline-description">Adds Multi Select Members.</p>
</div>
</li>
</ol>
<ol class="timeline" role="list" aria-label="Release history, default size">
<li class="timeline-item">
<span class="timeline-marker timeline-marker-primary"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Version 2.4.0</p>
<time class="timeline-time" datetime="2026-10-08">8 Oct 2026</time>
</div>
<p class="timeline-description">Timeline component and refreshed tokens.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Version 2.3.1</p>
<time class="timeline-time" datetime="2026-09-24">24 Sep 2026</time>
</div>
<p class="timeline-description">Fixes date picker focus clipping.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Version 2.3.0</p>
<time class="timeline-time" datetime="2026-09-02">2 Sep 2026</time>
</div>
<p class="timeline-description">Adds Multi Select Members.</p>
</div>
</li>
</ol><ol class="plf:timeline plf:timeline-sm" role="list" aria-label="Release history">
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-primary"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Version 2.4.0</p>
<time class="plf:timeline-time" datetime="2026-10-08">8 Oct 2026</time>
</div>
<p class="plf:timeline-description">Timeline component and refreshed tokens.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Version 2.3.1</p>
<time class="plf:timeline-time" datetime="2026-09-24">24 Sep 2026</time>
</div>
<p class="plf:timeline-description">Fixes date picker focus clipping.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Version 2.3.0</p>
<time class="plf:timeline-time" datetime="2026-09-02">2 Sep 2026</time>
</div>
<p class="plf:timeline-description">Adds Multi Select Members.</p>
</div>
</li>
</ol>
<ol class="plf:timeline" role="list" aria-label="Release history, default size">
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-primary"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Version 2.4.0</p>
<time class="plf:timeline-time" datetime="2026-10-08">8 Oct 2026</time>
</div>
<p class="plf:timeline-description">Timeline component and refreshed tokens.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Version 2.3.1</p>
<time class="plf:timeline-time" datetime="2026-09-24">24 Sep 2026</time>
</div>
<p class="plf:timeline-description">Fixes date picker focus clipping.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker"></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Version 2.3.0</p>
<time class="plf:timeline-time" datetime="2026-09-02">2 Sep 2026</time>
</div>
<p class="plf:timeline-description">Adds Multi Select Members.</p>
</div>
</li>
</ol>import {
Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle,
} from '@pelatform/react';
export function Example() {
return (
<>
<Timeline size="sm" aria-label="Release history">
<TimelineItem>
<TimelineMarker color="primary" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.4.0</TimelineTitle>
<TimelineTime dateTime="2026-10-08">8 Oct 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Timeline component and refreshed tokens.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.1</TimelineTitle>
<TimelineTime dateTime="2026-09-24">24 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Fixes date picker focus clipping.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.0</TimelineTitle>
<TimelineTime dateTime="2026-09-02">2 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Adds Multi Select Members.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
<Timeline aria-label="Release history, default size">
<TimelineItem>
<TimelineMarker color="primary" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.4.0</TimelineTitle>
<TimelineTime dateTime="2026-10-08">8 Oct 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Timeline component and refreshed tokens.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.1</TimelineTitle>
<TimelineTime dateTime="2026-09-24">24 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Fixes date picker focus clipping.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.0</TimelineTitle>
<TimelineTime dateTime="2026-09-02">2 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Adds Multi Select Members.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</>
);
}import {
Timeline, TimelineContent, TimelineDescription, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle,
} from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<Timeline size="sm" aria-label="Release history">
<TimelineItem>
<TimelineMarker color="primary" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.4.0</TimelineTitle>
<TimelineTime dateTime="2026-10-08">8 Oct 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Timeline component and refreshed tokens.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.1</TimelineTitle>
<TimelineTime dateTime="2026-09-24">24 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Fixes date picker focus clipping.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.0</TimelineTitle>
<TimelineTime dateTime="2026-09-02">2 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Adds Multi Select Members.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
<Timeline aria-label="Release history, default size">
<TimelineItem>
<TimelineMarker color="primary" />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.4.0</TimelineTitle>
<TimelineTime dateTime="2026-10-08">8 Oct 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Timeline component and refreshed tokens.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.1</TimelineTitle>
<TimelineTime dateTime="2026-09-24">24 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Fixes date picker focus clipping.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker />
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Version 2.3.0</TimelineTitle>
<TimelineTime dateTime="2026-09-02">2 Sep 2026</TimelineTime>
</TimelineHeader>
<TimelineDescription>Adds Multi Select Members.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</>
);
}Today
-
Jordan Rivera commented on Q4 launch plan
Let’s move the review to Thursday so finance can join.
-
Amara Okafor uploaded Brand guidelines.pdf
2.4 MB · Shared with Design
Yesterday
-
Lena Fischer joined the workspace
Invited by Jordan Rivera.
<div class="flex flex-col gap-6">
<div class="timeline-group">
<h3 class="timeline-group-title" id="timeline-today">Today</h3>
<ol class="timeline" role="list" aria-labelledby="timeline-today">
<li class="timeline-item">
<span class="timeline-marker" aria-hidden="true"><span class="avatar avatar-sm">JR</span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Jordan Rivera commented on <a class="timeline-link" href="#">Q4 launch plan</a></p>
<time class="timeline-time" datetime="2026-10-08T10:42">10:42</time>
</div>
<p class="timeline-description">Let’s move the review to Thursday so finance can join.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker" aria-hidden="true"><span class="avatar avatar-sm">AO</span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Amara Okafor uploaded <a class="timeline-link" href="#">Brand guidelines.pdf</a></p>
<time class="timeline-time" datetime="2026-10-08T09:15">09:15</time>
</div>
<p class="timeline-description">2.4 MB · Shared with Design</p>
</div>
</li>
</ol>
</div>
<div class="timeline-group">
<h3 class="timeline-group-title" id="timeline-yesterday">Yesterday</h3>
<ol class="timeline" role="list" aria-labelledby="timeline-yesterday">
<li class="timeline-item">
<span class="timeline-marker" aria-hidden="true"><span class="avatar avatar-sm">LF</span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Lena Fischer joined the workspace</p>
<time class="timeline-time" datetime="2026-10-07T16:20">16:20</time>
</div>
<p class="timeline-description">Invited by Jordan Rivera.</p>
</div>
</li>
</ol>
</div>
</div><div class="plf:flex plf:flex-col plf:gap-6">
<div class="plf:timeline-group">
<h3 class="plf:timeline-group-title" id="timeline-today">Today</h3>
<ol class="plf:timeline" role="list" aria-labelledby="timeline-today">
<li class="plf:timeline-item">
<span class="plf:timeline-marker" aria-hidden="true"><span class="plf:avatar plf:avatar-sm">JR</span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Jordan Rivera commented on <a class="plf:timeline-link" href="#">Q4 launch plan</a></p>
<time class="plf:timeline-time" datetime="2026-10-08T10:42">10:42</time>
</div>
<p class="plf:timeline-description">Let’s move the review to Thursday so finance can join.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker" aria-hidden="true"><span class="plf:avatar plf:avatar-sm">AO</span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Amara Okafor uploaded <a class="plf:timeline-link" href="#">Brand guidelines.pdf</a></p>
<time class="plf:timeline-time" datetime="2026-10-08T09:15">09:15</time>
</div>
<p class="plf:timeline-description">2.4 MB · Shared with Design</p>
</div>
</li>
</ol>
</div>
<div class="plf:timeline-group">
<h3 class="plf:timeline-group-title" id="timeline-yesterday">Yesterday</h3>
<ol class="plf:timeline" role="list" aria-labelledby="timeline-yesterday">
<li class="plf:timeline-item">
<span class="plf:timeline-marker" aria-hidden="true"><span class="plf:avatar plf:avatar-sm">LF</span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Lena Fischer joined the workspace</p>
<time class="plf:timeline-time" datetime="2026-10-07T16:20">16:20</time>
</div>
<p class="plf:timeline-description">Invited by Jordan Rivera.</p>
</div>
</li>
</ol>
</div>
</div>import { useId } from 'react';
import {
Avatar, Timeline, TimelineContent, TimelineDescription, TimelineGroup, TimelineGroupTitle, TimelineHeader, TimelineItem,
TimelineLink, TimelineMarker, TimelineTime, TimelineTitle,
} from '@pelatform/react';
export function Example() {
const today = useId();
const yesterday = useId();
return (
<div className="flex flex-col gap-6">
<TimelineGroup>
<TimelineGroupTitle id={today}>Today</TimelineGroupTitle>
<Timeline aria-labelledby={today}>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">JR</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Jordan Rivera commented on <TimelineLink href="#">Q4 launch plan</TimelineLink></TimelineTitle>
<TimelineTime dateTime="2026-10-08T10:42">10:42</TimelineTime>
</TimelineHeader>
<TimelineDescription>Let’s move the review to Thursday so finance can join.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">AO</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Amara Okafor uploaded <TimelineLink href="#">Brand guidelines.pdf</TimelineLink></TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:15">09:15</TimelineTime>
</TimelineHeader>
<TimelineDescription>2.4 MB · Shared with Design</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</TimelineGroup>
<TimelineGroup>
<TimelineGroupTitle id={yesterday}>Yesterday</TimelineGroupTitle>
<Timeline aria-labelledby={yesterday}>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">LF</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Lena Fischer joined the workspace</TimelineTitle>
<TimelineTime dateTime="2026-10-07T16:20">16:20</TimelineTime>
</TimelineHeader>
<TimelineDescription>Invited by Jordan Rivera.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</TimelineGroup>
</div>
);
}import { useId } from 'react';
import {
Avatar, Timeline, TimelineContent, TimelineDescription, TimelineGroup, TimelineGroupTitle, TimelineHeader, TimelineItem,
TimelineLink, TimelineMarker, TimelineTime, TimelineTitle,
} from '@pelatform/react/prefixed';
export function Example() {
const today = useId();
const yesterday = useId();
return (
<div className="plf:flex plf:flex-col plf:gap-6">
<TimelineGroup>
<TimelineGroupTitle id={today}>Today</TimelineGroupTitle>
<Timeline aria-labelledby={today}>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">JR</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Jordan Rivera commented on <TimelineLink href="#">Q4 launch plan</TimelineLink></TimelineTitle>
<TimelineTime dateTime="2026-10-08T10:42">10:42</TimelineTime>
</TimelineHeader>
<TimelineDescription>Let’s move the review to Thursday so finance can join.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">AO</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Amara Okafor uploaded <TimelineLink href="#">Brand guidelines.pdf</TimelineLink></TimelineTitle>
<TimelineTime dateTime="2026-10-08T09:15">09:15</TimelineTime>
</TimelineHeader>
<TimelineDescription>2.4 MB · Shared with Design</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</TimelineGroup>
<TimelineGroup>
<TimelineGroupTitle id={yesterday}>Yesterday</TimelineGroupTitle>
<Timeline aria-labelledby={yesterday}>
<TimelineItem>
<TimelineMarker aria-hidden="true"><Avatar size="sm">LF</Avatar></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Lena Fischer joined the workspace</TimelineTitle>
<TimelineTime dateTime="2026-10-07T16:20">16:20</TimelineTime>
</TimelineHeader>
<TimelineDescription>Invited by Jordan Rivera.</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</TimelineGroup>
</div>
);
}-
Build started
Triggered by a push to main.
-
Checks passed
128 tests in 3 minutes 41 seconds.
<ol class="timeline" role="list" aria-label="Deployment history">
<li class="timeline-item">
<span class="timeline-marker"><span class="icon icon-rotate"></span></span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Build started</p>
<time class="timeline-time" datetime="2026-10-08T14:02">14:02</time>
</div>
<p class="timeline-description">Triggered by a push to main.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-success">
<span class="icon icon-circle-check"></span>
</span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Checks passed</p>
<time class="timeline-time" datetime="2026-10-08T14:06">14:06</time>
</div>
<p class="timeline-description">128 tests in 3 minutes 41 seconds.</p>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker timeline-marker-error">
<span class="icon icon-alert-triangle"></span>
</span>
<div class="timeline-content">
<div class="timeline-header">
<p class="timeline-title">Deployment failed</p>
<time class="timeline-time" datetime="2026-10-08T14:09">14:09</time>
</div>
<p class="timeline-description">The health check timed out on the production region.</p>
<div class="timeline-detail">
<div class="flex flex-wrap items-center gap-2">
<button class="btn btn-outline btn-sm">Retry deployment</button>
<a class="btn btn-ghost btn-sm" href="#">View logs</a>
</div>
</div>
</div>
</li>
</ol><ol class="plf:timeline" role="list" aria-label="Deployment history">
<li class="plf:timeline-item">
<span class="plf:timeline-marker"><span class="plf:icon plf:icon-rotate"></span></span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Build started</p>
<time class="plf:timeline-time" datetime="2026-10-08T14:02">14:02</time>
</div>
<p class="plf:timeline-description">Triggered by a push to main.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-success">
<span class="plf:icon plf:icon-circle-check"></span>
</span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Checks passed</p>
<time class="plf:timeline-time" datetime="2026-10-08T14:06">14:06</time>
</div>
<p class="plf:timeline-description">128 tests in 3 minutes 41 seconds.</p>
</div>
</li>
<li class="plf:timeline-item">
<span class="plf:timeline-marker plf:timeline-marker-error">
<span class="plf:icon plf:icon-alert-triangle"></span>
</span>
<div class="plf:timeline-content">
<div class="plf:timeline-header">
<p class="plf:timeline-title">Deployment failed</p>
<time class="plf:timeline-time" datetime="2026-10-08T14:09">14:09</time>
</div>
<p class="plf:timeline-description">The health check timed out on the production region.</p>
<div class="plf:timeline-detail">
<div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
<button class="plf:btn plf:btn-outline plf:btn-sm">Retry deployment</button>
<a class="plf:btn plf:btn-ghost plf:btn-sm" href="#">View logs</a>
</div>
</div>
</div>
</li>
</ol>import { Button, buttonClass, Icon, Timeline, TimelineContent, TimelineDescription, TimelineDetail, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle } from '@pelatform/react';
export function Example() {
return (
<Timeline aria-label="Deployment history">
<TimelineItem>
<TimelineMarker><Icon name="rotate" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Build started</TimelineTitle>
<TimelineTime dateTime="2026-10-08T14:02">14:02</TimelineTime>
</TimelineHeader>
<TimelineDescription>Triggered by a push to main.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="success"><Icon name="circle-check" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Checks passed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T14:06">14:06</TimelineTime>
</TimelineHeader>
<TimelineDescription>128 tests in 3 minutes 41 seconds.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="error"><Icon name="alert-triangle" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Deployment failed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T14:09">14:09</TimelineTime>
</TimelineHeader>
<TimelineDescription>The health check timed out on the production region.</TimelineDescription>
<TimelineDetail>
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" size="sm">Retry deployment</Button>
<a className={buttonClass({ variant: 'ghost', size: 'sm' })} href="#">View logs</a>
</div>
</TimelineDetail>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}import { Button, buttonClass, Icon, Timeline, TimelineContent, TimelineDescription, TimelineDetail, TimelineHeader, TimelineItem, TimelineMarker, TimelineTime, TimelineTitle } from '@pelatform/react/prefixed';
export function Example() {
return (
<Timeline aria-label="Deployment history">
<TimelineItem>
<TimelineMarker><Icon name="rotate" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Build started</TimelineTitle>
<TimelineTime dateTime="2026-10-08T14:02">14:02</TimelineTime>
</TimelineHeader>
<TimelineDescription>Triggered by a push to main.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="success"><Icon name="circle-check" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Checks passed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T14:06">14:06</TimelineTime>
</TimelineHeader>
<TimelineDescription>128 tests in 3 minutes 41 seconds.</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineMarker color="error"><Icon name="alert-triangle" /></TimelineMarker>
<TimelineContent>
<TimelineHeader>
<TimelineTitle>Deployment failed</TimelineTitle>
<TimelineTime dateTime="2026-10-08T14:09">14:09</TimelineTime>
</TimelineHeader>
<TimelineDescription>The health check timed out on the production region.</TimelineDescription>
<TimelineDetail>
<div className="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
<Button variant="outline" size="sm">Retry deployment</Button>
<a className={buttonClass({ variant: 'ghost', size: 'sm' })} href="#">View logs</a>
</div>
</TimelineDetail>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}React
Timeline from @pelatform/react renders this list, role="list" included, and each part is a component of its own.
| Prop | Values | Default |
|---|---|---|
size |
sm |
The default size |
color on TimelineMarker |
primary, success, warning, error, info |
Muted |
The parts:
| Part | Element |
|---|---|
TimelineItem |
An li with timeline-item |
TimelineMarker |
A span with timeline-marker |
TimelineContent |
A div with timeline-content |
TimelineHeader |
A div with timeline-header |
TimelineTitle |
A p with timeline-title |
TimelineTime |
A time with timeline-time |
TimelineDescription |
A p with timeline-description |
TimelineDetail |
A div with timeline-detail |
TimelineLink |
An a with timeline-link |
TimelineGroup |
A div with timeline-group, which holds timelines under a TimelineGroupTitle |
TimelineGroupTitle |
An h3 with timeline-group-title, or another heading with level |
Other props are the element’s own, className and ref included.
CSS variables
Override on a root, a list or a single item; they win over the colors and the small size.
| Variable | Default |
|---|---|
--plf-timeline-color |
Text |
--plf-timeline-marker-size |
2rem (32px); 1. (24px) with timeline-sm |
--plf-timeline-icon-size |
1rem (16px); 0. (14px) with timeline-sm |
--plf-timeline-gap |
Space 6 (24px) between items; space 4 (16px) small |
--plf-timeline-line-color |
--plf-color-border-subtle |
--plf-timeline-marker-bg |
Surface; a color’s subtle background |
--plf-timeline-marker-color |
Muted text; the color itself |
--plf-timeline-marker-border |
--plf-color-border-subtle; the color’s border |
--plf-timeline-time-color |
Muted text |
--plf-timeline-description-color |
Muted text |