timeline

Ordered sequence of events or steps connected by a line. Supports vertical (default) and horizontal orientations. Each item accepts a raw HTML content slot — pass any text, component, or markup.

Vertical (default)

Steps flow downward. The connector line links each dot to the next.

Jan 2023
Project kicked off
Initial scope agreed with stakeholders. Repository created.
Mar 2023
Alpha release
Internal testing with 12 pilot users. Core features stable.
Jun 2023
Public beta
Open sign-up enabled. 400 users in first week.
Sep 2023
v1.0 launched
Billing live, docs published, ProductHunt launch.

timeline({
  items: [
    { label: 'Jan 2023', content: '<strong>Project kicked off</strong><p>Initial scope agreed.</p>' },
    { label: 'Mar 2023', content: '<strong>Alpha release</strong><p>Internal testing with 12 pilot users.</p>' },
    { label: 'Jun 2023', content: '<strong>Public beta</strong><p>Open sign-up enabled. 400 users in first week.</p>' },
    { label: 'Sep 2023', content: '<strong>v1.0 launched</strong><p>Billing live, docs published.</p>' },
  ],
})

Horizontal

Steps flow left to right — good for process flows or numbered stages.

Step 1
Sign up
Step 2
Connect data
Step 3
Invite team
Step 4
Go live

timeline({
  direction: 'horizontal',
  items: [
    { label: 'Step 1', content: '<p>Sign up</p>'      },
    { label: 'Step 2', content: '<p>Connect data</p>' },
    { label: 'Step 3', content: '<p>Invite team</p>'  },
    { label: 'Step 4', content: '<p>Go live</p>'      },
  ],
})

Dot colours

Use dotColor to convey status: 'accent' · 'success' · 'warning' · 'error' · 'muted'.

Deployed
Production deploy completed successfully.
Tested
All 92 tests passed. Coverage 98%.
Review
Awaiting sign-off from design lead.
Blocked
Dependency on payment API not yet ready.
Planned
Mobile app release — Q1 2025.

timeline({
  items: [
    { dotColor: 'success', label: 'Deployed', content: '...' },
    { dotColor: 'success', label: 'Tested',   content: '...' },
    { dotColor: 'warning', label: 'Review',   content: '...' },
    { dotColor: 'error',   label: 'Blocked',  content: '...' },
    { dotColor: 'muted',   label: 'Planned',  content: '...' },
  ],
})

Icon dots

Pass any SVG or emoji as dot. The dot grows to accommodate the content and uses a tinted background matching its colour variant.

Completed
Onboarding
Profile set up, preferences saved.
Milestone
First 1,000 users
Reached organically in 18 days.
Incident
Partial outage
CDN edge node failed — resolved in 4 minutes.

timeline({
  items: [
    {
      dot:      checkSvg,
      dotColor: 'success',
      label:    'Completed',
      content:  '<strong>Onboarding</strong><p>Profile set up, preferences saved.</p>',
    },
    {
      dot:      starSvg,
      dotColor: 'accent',
      label:    'Milestone',
      content:  '<strong>First 1,000 users</strong>',
    },
  ],
})

Rich content slot

The content slot accepts any HTML — including other Pulse components like card(), badge(), or stat().

Q1 2024
Series A closed

Raised

$4.2M

Valuation

$18M

Investors

6
Q3 2024
Product launch
Shipped v1.0 to general availability. Three tiers, 14-day trial.
LaunchBilling live
Q1 2025 (planned)
Mobile apps
iOS and Android apps in development. Public beta planned.

timeline({
  items: [
    {
      dotColor: 'success',
      label:    'Q1 2024',
      content:  card({
        title:   'Series A closed',
        content: stat({ label: 'Raised', value: '$4.2M' }) + ...,
      }),
    },
    {
      dotColor: 'accent',
      label:    'Q3 2024',
      content:  card({
        title:   'Product launch',
        content: '<p>Shipped v1.0 to general availability.</p>' +
                 badge({ label: 'Billing live', variant: 'success' }),
      }),
    },
  ],
})

Using timelineItem()

Build items individually with timelineItem() and pass the joined HTML as content. Useful for dynamic or conditional lists.

Done
Design system tokens agreed
Done
Component library built
Current
Documentation in progress
Next
Public launch

timeline({
  content:
    timelineItem({ dotColor: 'success', label: 'Done',    content: '...' }) +
    timelineItem({ dotColor: 'success', label: 'Done',    content: '...' }) +
    timelineItem({ dotColor: 'accent',  label: 'Current', content: '...' }) +
    timelineItem({ dotColor: 'muted',   label: 'Next',    content: '...' }),
})

Prop	Type	Default
`direction`	string	'vertical'	'vertical' · 'horizontal'
`items`	array	[]	Array of `timelineItem` option objects
`content`	string (HTML)	—	Raw HTML alternative to `items` — use with `timelineItem()`

timelineItem() props

Prop	Type	Default
`content`	string (HTML)	—	Raw HTML body — accepts any component output
`label`	string	—	Timestamp or step label (escaped)
`dot`	string (HTML)	—	Raw HTML inside the dot — SVG or emoji; grows the dot to 2rem
`dotColor`	string	'accent'	'accent' · 'success' · 'warning' · 'error' · 'muted'