Display Timeline

Timeline

Vertical timeline for activity feeds, changelogs, and event histories. Supports icon dots, split layout, color variants, compact and relaxed spacing, hoverable items, and meta-chips.

Basic

Add wf-timeline to an ol or ul . Each wf-timeline-item holds a wf-timeline-separator and a wf-timeline-content block. Omit wf-timeline-line on the last item.

  1. v3.0 Beta Released

    A new component library launched with 50+ parts and full dark mode support.

  2. v2.5 Update

    Performance improvements and accessibility audit completed across all components.

  3. v2.0 Rewrite

    Complete design system rewrite with CSS custom properties and new layout primitives.

  4. v1.0 Launch

    Initial public release of Wojo Framework.

HTML 
<ol class="wf-timeline">
  <li class="wf-timeline-item">
    <div class="wf-timeline-separator">
      <span class="wf-timeline-dot"></span>
      <span class="wf-timeline-line"></span>
    </div>
    <div class="wf-timeline-content">
      <time class="wf-timeline-time">Jun 2026</time>
      <h4 class="wf-timeline-title">v3.0 Beta Released</h4>
      <p class="wf-timeline-description">New component library launched.</p>
    </div>
  </li>
  <!-- last item: omit wf-timeline-line -->
  <li class="wf-timeline-item">
    <div class="wf-timeline-separator">
      <span class="wf-timeline-dot"></span>
    </div>
    <div class="wf-timeline-content">
      <time class="wf-timeline-time">Apr 2025</time>
      <h4 class="wf-timeline-title">v1.0 Launch</h4>
      <p class="wf-timeline-description">Initial public release.</p>
    </div>
  </li>
</ol>

Icon Dot

Add wf-timeline-icon to the container to enlarge every dot into an icon-sized circle. Place an icon or glyph directly inside wf-timeline-dot .

  1. Deployment complete

    The production build passed all checks and is live.

  2. Build triggered

    CI pipeline started for branch main .

  3. Pull request approved

    Code review passed with two approvals.

  4. Branch created

    Feature branch forked from develop .

HTML 
<ol class="wf-timeline wf-timeline-icon">
  <li class="wf-timeline-item">
    <div class="wf-timeline-separator">
      <span class="wf-timeline-dot"><i class="icon check circle"></i></span>
      <span class="wf-timeline-line"></span>
    </div>
    <div class="wf-timeline-content">
      <time class="wf-timeline-time">Jun 2026</time>
      <h4 class="wf-timeline-title">Deployment complete</h4>
      <p class="wf-timeline-description">Production build passed all checks and is live.</p>
    </div>
  </li>
</ol>

Compact & Relaxed

Use wf-timeline-compact for tight activity feeds or sidebars. Use wf-timeline-relaxed for spacious layouts such as landing page changelogs.

Compact wf-timeline-compact

  1. Item one

    Tight spacing for dense lists.

  2. Item two

    Suitable for sidebars and narrow containers.

  3. Item three

    Last item.

HTML 
<ol class="wf-timeline wf-timeline-compact">…</ol>

Relaxed wf-timeline-relaxed

  1. Item one

    Generous spacing for feature announcements.

  2. Item two

    Ideal for landing pages and changelogs.

  3. Item three

    Last item.

HTML 
<ol class="wf-timeline wf-timeline-relaxed">…</ol>

Hoverable

Add wf-timeline-hoverable to apply a subtle accent highlight to the item under the cursor — useful in interactive activity feeds.

  1. Comment added

    Alex left a comment on issue #42.

  2. Label applied

    Issue tagged as enhancement .

  3. Issue opened

    Reported by a community contributor.

HTML 
<ol class="wf-timeline wf-timeline-hoverable">…</ol>

Colors

Apply a color modifier to the container to tint the accent, dot, and chips across all items. Available variants: primary , success , warning , danger , muted .

Primary

  1. Scheduled

    Deployment queued for tonight.

  2. In progress

    Pipeline running.

HTML 
<ol class="wf-timeline wf-timeline-primary">…</ol>

Success

  1. Tests passed

    All 347 tests are green.

  2. Deployed

    Production is live.

HTML 
<ol class="wf-timeline wf-timeline-success">…</ol>

Warning

  1. Slow response

    API p99 above a threshold.

  2. Alert triggered

    On-call notified.

HTML 
<ol class="wf-timeline wf-timeline-warning">…</ol>

Danger

  1. Service down

    Health check failed.

  2. Incident opened

    SEV-1 raised.

HTML 
<ol class="wf-timeline wf-timeline-danger">…</ol>

Muted

  1. Log entry

    Routine system event.

  2. Archived

    Marked as resolved.

HTML 
<ol class="wf-timeline wf-timeline-muted">…</ol>

Meta & Chips

Add a wf-timeline-meta row after the description to surface tags and badges. Each wf-timeline-chip inherits the container's accent color.

  1. v3.0 Beta Released

    New component library with redesigned layout primitives and CSS custom properties throughout.

    Breaking Change 50+ Components Dark Mode

  2. v2.5 Update

    Performance optimizations and full WCAG 2.1 AA audit.

    Performance Accessibility

  3. v2.0 Rewrite

    Complete design system rewrite.

    Rewrite CSS Tokens Theming
HTML 
<li class="wf-timeline-item">
  <div class="wf-timeline-separator">
    <span class="wf-timeline-dot"></span>
    <span class="wf-timeline-line"></span>
  </div>
  <div class="wf-timeline-content">
    <time class="wf-timeline-time">Jun 2026</time>
    <h4 class="wf-timeline-title">v3.0 Beta Released</h4>
    <p class="wf-timeline-description">New component library launched.</p>
    <div class="wf-timeline-meta">
      <span class="wf-timeline-chip">Breaking Change</span>
      <span class="wf-timeline-chip">50+ Components</span>
      <span class="wf-timeline-chip">Dark Mode</span>
    </div>
  </div>
</li>

Split Layout

Add wf-timeline-split to the container for a three-column layout: a right-aligned date column, the separator lane, and the content area. Use wf-timeline-date on the date element inside each wf-timeline-item . The layout collapses to two columns on small screens.

  1. v3.0 Beta Released

    A new component library launched with 50+ parts and full dark mode support.

  2. v2.5 Update

    Performance improvements and accessibility audit completed.

  3. v2.0 Rewrite

    Complete design system rewrite with CSS custom properties.

  4. v1.0 Launch

    Initial public release of Wojo Framework.

HTML 
<ol class="wf-timeline wf-timeline-split">
  <li class="wf-timeline-item">
    <time class="wf-timeline-date">Jun 2026</time>
    <div class="wf-timeline-separator">
      <span class="wf-timeline-dot"></span>
      <span class="wf-timeline-line"></span>
    </div>
    <div class="wf-timeline-content">
      <h4 class="wf-timeline-title">v3.0 Beta Released</h4>
      <p class="wf-timeline-description">New component library launched.</p>
    </div>
  </li>
</ol>

Custom Properties

Property Default Description
--wf-timeline-gap 1.25rem Vertical gap between items and the minimum height of the connecting line.
--wf-timeline-line border token color of the vertical connecting line.
--wf-timeline-dot-bg surface token Background fills of the dot circle.
--wf-timeline-dot-border border token Border color of the dot circle.
--wf-timeline-dot-color muted text token Icon or text color inside the dot (icon mode only).
--wf-timeline-accent primary token Accent color is applied to the dot border, chips, and hover highlight.
--wf-timeline-title heading token color of the item title text.
--wf-timeline-body body token color of the description text.
--wf-timeline-time muted text token color of the inline timestamp and split-layout date.
--wf-timeline-lane-size 1.5rem Width of the separator column.
--wf-timeline-dot-size 0.625rem Diameter of the default small dot.
--wf-timeline-icon-size 2rem Diameter of the enlarged dot in icon mode.

Class Reference

All modifier classes available on .wf-timeline

Class Type Description
wf-timeline Base Base container — apply to ol or ul .
wf-timeline-item Layout Individual event row — apply to li .
wf-timeline-separator Layout Vertical lane wrapper holding the dot and connecting line.
wf-timeline-dot Part Circular indicator; becomes an icon container when wf-timeline-icon is set on the container.
wf-timeline-line Part Connecting line between dots. Omit on the last item.
wf-timeline-content Layout Content area to the right of the separator.
wf-timeline-time Part Small timestamp rendered above the title inside the content area.
wf-timeline-title Part Event heading.
wf-timeline-description Part Body text beneath the title.
wf-timeline-meta Part Flex-wrap chip row for tags and badges.
wf-timeline-chip Part Pill badge inside wf-timeline-meta ; uses the container's accent color.
wf-timeline-date Part Right-aligned date label in the left column of a split layout.
wf-timeline-compact / wf-timeline-relaxed Modifier Decrease or increase gap and item padding from the default.
wf-timeline-hoverable Modifier Adds a subtle accent highlight to each item on hover.
wf-timeline-icon Modifier Enlarges the dot to hold an icon or short text glyph.
wf-timeline-split Modifier Three-column layout: date column | separator lane | content area.
wf-timeline-primary / wf-timeline-success / wf-timeline-warning / wf-timeline-danger / wf-timeline-muted Color color variants applied to the container; tints the accent, dot, and chips.
Show More