Nimbus Pro
AS

Timeline

Chronological sequences — vertical with dots, icons, or avatars, alternating sides, horizontal steppers, and rich content cards.

Basic Vertical

Dotted markers with time labels

  • Standup

    09:00

    Daily team sync

  • Design review

    11:30

    Walk through the new dashboard

  • Ship v2.4

    14:00

    Release Nimbus Pro 2.4 to production

  • Retro

    16:30

    Sprint 32 retrospective

With Icons

Each event has a typed icon

  • Commit pushed

    2m ago

    feat: add breadcrumbs page

  • PR opened

    5m ago

    #142 — UI showcase batch

  • CI passed

    8m ago

    All 218 tests green

  • Merged into main

    12m ago

    by Aria Chen

  • Deployed to prod

    20m ago

    nimbus-pro v2.4.1

With Avatars

Activity feed style

  • AC

    Aria Chen created a task Design new onboarding

    10 min ago
  • JL

    Jordan Lee commented on API refactoring

    1 hour ago
  • PS

    Priya Shah uploaded a file Q4-report.pdf

    3 hours ago
  • MK

    Marcus Kim completed Sprint 32 planning

    Yesterday

Alternating Sides

Cards zig-zag across a central line (desktop)

  • Mar 4

    Project kickoff

    Stakeholders aligned on goals

  • Mar 11

    Discovery sprint

    User interviews and competitive scan

  • Mar 22

    Design review

    Hi-fi mockups approved

  • Apr 5

    Beta launch

    Internal release to 50 users

  • Apr 19

    GA release

    Public launch on Product Hunt

Horizontal Stepper

Process flows & status trackers

  • Applied

    Mar 1

  • Screening

    Mar 5

  • Interview

    Mar 12

  • Offer

    Mar 18

  • Onboard

    Apr 1

Great for hiring pipelines, order tracking, and multi-step approvals. Collapses to a vertical dot list on mobile.

Rich Content Cards

Notifications with body text and tags

  • Aria Chen commented on Dashboard redesign

    2 hours ago

    The KPI tiles look great — can we add a comparison vs last month? I think it'd help the executive view.

    Designv2.4

  • Jordan Lee shared a document

    5 hours ago

    Q4 strategy draft — please add comments by EOD Friday. I'll incorporate feedback over the weekend.

    StrategyQ4

  • Build failed on main

    Yesterday

    TypeError in src/components/charts/Line.tsx — non-finite y-scale value. Pinned to commit a1b2c3d.

    CIBug

  • Priya Shah starred Nimbus Pro

    2 days ago

    First 5-star review from a Pro tier customer. Quoted: "The new command palette is a game changer."

    FeedbackPro

Anatomy & Tips

Timeline best practices

Vertical line

Use a 1px line in border-color. Markers sit on top with a 4px white ring to mask the line.

Color = type

Reserve tone for event type (success, warning, error) — not for emphasis.

Density

If items > 10, group by day with sticky date headers and collapse older events.

Alternating

Only alternate on md+ screens. On mobile, all cards should sit on the right of the line.