Markus
Contents

Timeline

timeline and timeline-event.

A timeline is a chronological sequence. timeline may contain only timeline-event blocks.

Attributes

Attribute Values Default
timeline label any text; accessible name none
event date any text none
event time any text none
event title any text none
event icon icon name or text, as for cards none

Every directive also accepts id, which becomes the HTML id; see Syntax and metadata.

Dates and titles

Markus

:::timeline{label="Release history"}
:::timeline-event{date="2026-06-01" title="Prototype"}
First working parser.
:::

:::timeline-event{date="2026-08-15" title="Registry"}
Strict attribute schemas.
:::

:::timeline-event{date="2026-09-04" title="Site builder"}
The demo site.
:::
:::

Preview

  1. Prototype

    First working parser.

  2. Registry

    Strict attribute schemas.

  3. Site builder

    The demo site.

With time

Markus

:::timeline
:::timeline-event{date="2026-09-04" time="09:00" title="Kickoff"}
Date and time together.
:::

:::timeline-event{date="2026-09-04" time="14:30" title="Review"}
Same day, later.
:::
:::

Preview

  1. Kickoff

    Date and time together.

  2. Review

    Same day, later.

With icons

Markus

:::timeline{label="Journey"}
:::timeline-event{date="Q1" title="Idea" icon="brain"}
Brain icon.
:::

:::timeline-event{date="Q2" title="Build" icon="bolt"}
Bolt icon.
:::

:::timeline-event{date="Q3" title="Ship" icon="book"}
Book icon.
:::
:::

Preview

  1. Idea

    Brain icon.

  2. Build

    Bolt icon.

  3. Ship

    Book icon.

Date only, no title

Markus

:::timeline
:::timeline-event{date="2026"}
An event with just a date and a body.
:::

:::timeline-event{date="2027"}
Another.
:::
:::

Preview

  1. An event with just a date and a body.

  2. Another.

Title only, no date

Markus

:::timeline
:::timeline-event{title="Step one"}
No date.
:::

:::timeline-event{title="Step two"}
Still no date.
:::
:::

Preview

  1. Step one

    No date.

  2. Step two

    Still no date.