Layouts

Timelines are written as nested Pandoc divs. The outer .timeline div sets the layout; each inner .event div is one entry, with a data-label attribute for the marker.

Horizontal

The default layout. Events are arranged left to right with a line across the top.

::: timeline
::: {.event data-label="2020"}
**Project Started**
Initial concept and planning phase.
:::
::: {.event data-label="2021"}
**First Release**
Launched version 1.0 to early users.
:::
::: {.event data-label="2022"}
**Major Update**
Rewrote core engine for performance.
:::
::: {.event data-label="2023"}
**Scale Up**
Reached 1 million users worldwide.
:::
:::

Project Started Initial concept and planning phase.

First Release Launched version 1.0 to early users.

Major Update Rewrote core engine for performance.

Scale Up Reached 1 million users worldwide.

Vertical

Line on the left, events stacked top to bottom.

::: {.timeline .vertical}
::: {.event data-label="2020"}
**Project Started** — Initial concept and planning phase.
:::
...
:::

Project Started — Initial concept and planning phase.

First Release — Launched version 1.0 to early users.

Major Update — Rewrote core engine for performance.

Scale Up — Reached 1 million users worldwide.

Vertical Right

Mirror of vertical — line on the right, content flows left.

::: {.timeline .vertical-right}
...
:::

Project Started — Initial concept and planning phase.

First Release — Launched version 1.0 to early users.

Major Update — Rewrote core engine for performance.

Scale Up — Reached 1 million users worldwide.

Vertical Alternating

Center line with events alternating left and right.

::: {.timeline .vertical-alt}
...
:::

Project Started Initial concept and planning phase.

First Release Launched version 1.0 to early users.

Major Update Rewrote core engine for performance.

Scale Up Reached 1 million users worldwide.

Snake

Events alternate left and right, connected by a continuous serpentine border path.

::: {.timeline .snake}
...
:::

Project Started Initial concept and planning phase.

First Release Launched version 1.0 to early users.

Major Update Rewrote core engine for performance.

Scale Up Reached 1 million users worldwide.

Grouped Events

Multiple events sharing the same data-label are automatically grouped under a single marker.

::: timeline
::: {.event data-label="2020"}
**Project Started**
Initial concept and planning phase.
:::
::: {.event data-label="2020"}
**Team Formed**
Hired first three engineers.
:::
::: {.event data-label="2021"}
**First Release**
Launched version 1.0 to early users.
:::
:::

Project Started Initial concept and planning phase.

Team Formed Hired first three engineers.

First Release Launched version 1.0 to early users.

Major Update Rewrote core engine for performance.

Partnership Signed deal with enterprise partner.

Scale Up Reached 1 million users worldwide.

Grouping is automatic and works with all layouts.

Empty Events

An event with no content — just a label and dot, nothing below — is written as an empty div. Use this to mark a year or period where nothing notable occurred, keeping the timeline continuous without gaps.

::: {.event data-label="2023"}
:::

Horizontal:

::: timeline
::: {.event data-label="2020"}
**Project Started**
Initial concept and planning phase.
:::
::: {.event data-label="2021"}
**First Release**
Launched version 1.0 to early users.
:::
::: {.event data-label="2022"}
:::
::: {.event data-label="2023"}
**Scale Up**
Reached 1 million users worldwide.
:::
:::

Project Started Initial concept and planning phase.

First Release Launched version 1.0 to early users.

Scale Up Reached 1 million users worldwide.

Vertical:

::: {.timeline .vertical}
::: {.event data-label="2020"}
**Project Started** — Initial concept and planning phase.
:::
::: {.event data-label="2021"}
**First Release** — Launched version 1.0 to early users.
:::
::: {.event data-label="2022"}
:::
::: {.event data-label="2023"}
**Scale Up** — Reached 1 million users worldwide.
:::
:::

Project Started — Initial concept and planning phase.

First Release — Launched version 1.0 to early users.

Scale Up — Reached 1 million users worldwide.

Multiple consecutive empty events work the same way — each gets its own dot and label:

Idea Born — Napkin sketch becomes a roadmap.

First Release — Version 1.0 ships.