Vertical and horizontal timeline displays for chronological events, status tracking, and activity feeds. Perfect for order tracking, project history, and notifications.
Overview
Timeline patterns display chronological sequences of events with visual connectors. They help users understand the progression of activities, track status changes, and review historical data.
Key features:
Semantic <ol>/<li> structure for ordered events
Scoped CSS with @scope for clean namespacing
Vertical and horizontal layout options
Status indicators via data-status attributes
Integration with user-avatar, tooltip-wc, and layout-reel
Semantic <time> elements for dates
CSS custom properties for easy theming
Simple Vertical Timeline
A clean vertical timeline with dots connecting each event. Uses semantic <ol>/<li> markup and CSS pseudo-elements for the line and markers. Ideal for project history, milestones, or changelog displays.
Each timeline entry displays a status icon instead of a simple dot. Uses data-status attributes for styling variants and title + data-tooltip on icons to show completion details on hover. Without JS, the native browser tooltip provides a fallback. Great for order tracking and process workflows.
<ol class="timeline" aria-label="Order status timeline">
<li>
<span data-status="completed" aria-label="Completed"
tabindex="0" title="Completed on March 20, 2024 at 9:00 AM" data-tooltip>
<icon-wc name="check" size="sm"></icon-wc>
</span>
<layout-stack data-layout-gap="2xs">
<time datetime="2024-03-20T09:00">March 20, 9:00 AM</time>
<h3>Order Placed</h3>
<p>Your order #12345 has been confirmed.</p>
</layout-stack>
</li>
<li>
<span data-status="pending" aria-label="Pending"
tabindex="0" title="Expected delivery on March 24, 2024" data-tooltip>
<icon-wc name="clock" size="sm"></icon-wc>
</span>
<layout-stack data-layout-gap="2xs">
<time datetime="2024-03-24">Expected March 24</time>
<h3>Out for Delivery</h3>
<p>Package will be delivered to your address.</p>
</layout-stack>
</li>
</ol>@scope (.timeline) {
span[data-status] {
position: absolute;
left: calc(-1 * (var(--timeline-icon-size) + var(--size-m)));
top: 0;
width: var(--timeline-icon-size);
height: var(--timeline-icon-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
border: 2px solid var(--color-border);
}
span[data-status="completed"] {
background: var(--color-success);
border-color: var(--color-success);
color: white;
}
span[data-status="pending"] {
background: var(--color-warning);
border-color: var(--color-warning);
color: white;
}
span[data-status="warning"] {
background: var(--color-danger);
border-color: var(--color-danger);
color: white;
}
span[data-status="scheduled"] {
background: var(--color-interactive);
border-color: var(--color-interactive);
color: white;
}
}
Activity Feed
A compact feed-style timeline for notifications and activity logs. Uses the user-avatar component for avatars, action descriptions with links, and relative timestamps. Suitable for dashboards and notification centers.
A horizontal scrolling timeline using layout-reel for touch-friendly scroll-snap behavior. The <ol> uses display: contents so <li> items participate directly in the reel's flex layout. Ideal for project roadmaps and milestone tracking.