2 Apr 2026

Timelines¶

Timeline is a simple widget that you can use on your pages to show, well, a timeline of something.

Directives¶

.. mcl-timeline::¶: Directive that spawns a timeline. It can contain nested mcl-timeline-event directives and nothing else.

.. mcl-timeline-event::¶

Directive that spawns a timeline event. Is only valid when inside an mcl-timeline directive. Accepts a single argument which can be used to denote event’s date. Also accepts content which can be used as a title of event.

Both content and argument accept formatting provided by the parser you configured Sphinx to use. However, argument will always be displayed in gray font and content in bold. Also, using block elements in content is discouraged.

:icon:¶: Path to an icon. Required.

Example¶

The following code:

:::::{card} Timeline demo
::::{mcl-timeline}

:::{mcl-timeline-event} ~2000
:icon: ../_static/campfire.png

[2nd Honkai Eruption](https://example.com)
:::

:::{mcl-timeline-event} ~2000
:icon: ../_static/campfire.png

[1st Honkai Eruption](https://example.com)
:::

:::{mcl-timeline-event} July 1987
:icon: ../_static/campfire.png

[Sirin is born in Siberia](https://example.com)
:::

:::{mcl-timeline-event} March 1972
:icon: ../_static/campfire.png

[Theresa Apocalypse (A-310) is created](https://example.com)
:::

::::
:::::

Should be rendered as:

Timeline demo

2nd Honkai Eruption: ~2000

1st Honkai Eruption: ~2000

Sirin is born in Siberia: July 1987

Theresa Apocalypse (A-310) is created: March 1972