Timeline Vertical
timeline_vertical renders a structured timeline with date/step labels and optional icons.
When to Use
Use it for roadmaps, project plans, onboarding flows, implementation timelines, or launch sequences.
Usage
{{ timeline_vertical(title="Roadmap", item_1_date="Step 1", item_1_title="Plan") }}Live Example
Plan
A clear launch sequence
Pair high-level copy with a structured milestone list.
Step 01
Audit the page
Identify the sections and proof points needed.
Step 02
Compose shortcodes
Assemble clean sections with consistent spacing.
Step 03
Ship and iterate
Run the build and refine copy against the result.
Parameters
| Parameter | Description |
|---|---|
container | Inner content width. |
eyebrow | Small uppercase label above the heading. |
title | Section heading. |
description | Supporting copy. |
item_N_date | Timeline date or step label, up to 5. |
item_N_title | Timeline item title. |
item_N_desc | Timeline item description. |
item_N_icon | Optional icon name. |
bg | Full-width section background token. |
class | Additional CSS classes on the outer section. |