Numbered Steps

← Gallery

Run quarto add EmilHvitfeldt/quarto-timeline in your project directory.

Add filters: [timeline] to your document or project YAML.

Create a .timeline div with nested .event divs and data-label attributes.

Run quarto render and open the output in your browser.

.vertical with .tl-compact and data-dot for step numbers. --tl-color-accent on the timeline sets a consistent color for both labels and dot borders across all events.

::: {.timeline .vertical .tl-compact style="--tl-dot-size: 32px; --tl-color-accent: #2563eb;"}
::: {.event data-label="Install" data-dot="1"}
Run `quarto add EmilHvitfeldt/quarto-timeline` in your project directory.
:::
::: {.event data-label="Filter" data-dot="2"}
Add `filters: [timeline]` to your document or project YAML.
:::
::: {.event data-label="Write" data-dot="3"}
Create a `.timeline` div with nested `.event` divs and `data-label` attributes.
:::
::: {.event data-label="Render" data-dot="4"}
Run `quarto render` and open the output in your browser.
:::
:::