Timeline

A vertical activity feed for displaying chronological events — deployments, audit logs, status updates, user activity. Each item has a colored dot indicator, optional icon, timestamp, and content area.

Basic Usage

<x-wirekit::timeline>
    <x-wirekit::timeline.item time="2 hours ago">
        <x-slot:title>Deployed v1.2.0</x-slot:title>
        Release notes linked below.
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="5 hours ago">
        <x-slot:title>Tests passed</x-slot:title>
        All 142 tests green.
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="1 day ago">
        <x-slot:title>Branch created</x-slot:title>
        feature/new-dashboard
    </x-wirekit::timeline.item>
</x-wirekit::timeline>

With Intent Colors

Use the intent prop on individual items to signal different event types:

<x-wirekit::timeline>
    <x-wirekit::timeline.item intent="success" time="Just now">
        <x-slot:title>Deployment successful</x-slot:title>
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item intent="warning" time="10 min ago">
        <x-slot:title>Build warning: deprecated API</x-slot:title>
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item intent="danger" time="1 hour ago">
        <x-slot:title>Pipeline failed</x-slot:title>
        Exit code 1 on test step.
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="2 hours ago">
        <x-slot:title>Commit pushed</x-slot:title>
    </x-wirekit::timeline.item>
</x-wirekit::timeline>

With Icons

Pass a semantic icon alias to each item:

<x-wirekit::timeline>
    <x-wirekit::timeline.item icon="check" intent="success" time="Just now">
        <x-slot:title>Deployed</x-slot:title>
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item icon="warning" intent="warning" time="5 min ago">
        <x-slot:title>Warning issued</x-slot:title>
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item icon="close" intent="danger" time="1 hour ago">
        <x-slot:title>Build failed</x-slot:title>
    </x-wirekit::timeline.item>
</x-wirekit::timeline>

Continuation Lines

Use before and after to show dashed fade-in / fade-out lines, indicating that the visible timeline is part of a larger history. The lines use a CSS mask-image gradient to fade gracefully.

<x-wirekit::timeline :before="true" :after="true">
    <x-wirekit::timeline.item intent="success" time="2 hours ago">
        <x-slot:title>Deployed v1.2.0</x-slot:title>
        Release notes linked below.
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="5 hours ago">
        <x-slot:title>Tests passed</x-slot:title>
        All 142 tests green.
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="1 day ago">
        <x-slot:title>Branch created</x-slot:title>
        feature/new-dashboard
    </x-wirekit::timeline.item>
</x-wirekit::timeline>

• before — dashed line that fades in from the top, indicating earlier events exist above
• after — dashed line that fades out at the bottom, indicating later events exist below

Layout

Every timeline renders one layout: items on the left, each with a dot indicator and a vertical connector line running between them.

The variant styling hook

variant is passed straight through to a data-wk-timeline attribute on the <ol>. WireKit's stylesheet reads that the attribute is present — that is what strips the trailing padding from the final item — but it ships no rules that branch on its value, so a timeline renders identically whatever you pass. The prop is a hook for your own stylesheet, not a set of layouts WireKit implements. Do not reach for it expecting tighter or centered spacing to arrive on its own.

It earns its keep when a project wants one timeline in the application styled differently from the rest, without threading a class through every call site:

<x-wirekit::timeline variant="compact">
    <x-wirekit::timeline.item time="09:15">
        <x-slot:title>Login</x-slot:title>
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="09:22">
        <x-slot:title>Updated profile</x-slot:title>
    </x-wirekit::timeline.item>
    <x-wirekit::timeline.item time="09:30">
        <x-slot:title>Logout</x-slot:title>
    </x-wirekit::timeline.item>
</x-wirekit::timeline>

The markup above renders at the standard spacing. Add the rule to your own app.css and the same markup tightens, because the item content area carries a data-wk-timeline-item-content hook of its own:

/* 1. Scope to the value you passed — the container writes it verbatim. */
[data-wk-timeline="compact"] [data-wk-timeline-item-content] {
    /* 2. Half the stock 1.5rem gap. WireKit's own zeroing rule for the final
          item is more specific, so the timeline still ends flush. */
    padding-bottom: 0.75rem;
}

Timeline Props

Timeline Item Props

Slots

Accessibility

• Uses semantic <ol> (ordered list) — screen readers announce "list of N items"
• Each event is an <li> — natural reading order matches chronological order
• Dot indicators and connector lines are aria-hidden="true" — decorative only
• Timestamp uses <time> element for machine-readable dates
• All text content is accessible without relying on visual indicators
• An item with variant/intent set to success, warning or danger also emits a translated screen-reader-only status word ("Status: Success", "Status: Warning", "Status: Error") ahead of its title, so the outcome the dot color signals is not carried by color alone (WCAG 1.4.1). A default item emits nothing — it signals no outcome, and a status word on every row would be noise
• The dot color is reinforcement, not the message. Write the title so it reads correctly with the color removed ("Pipeline failed", not "Pipeline")

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

• Don't put more than 50 events in one timeline. Cognitive overload + DOM weight. Paginate or filter.

Design Tokens

Customization

This component reads no config/wirekit.php keys — every option is a prop. Style it through the design tokens above, or scope a variant with the scope prop.

An empty 'timeline' => [] block in the config is not an override point: pasting one changes nothing.

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.

Further Reading

• WAI-ARIA: Lists
• MDN: <ol> element
• MDN: <time> element