# Timeline Vertical

> Render roadmap, process, or milestone items.

Canonical HTML: https://press.varavel.com/docs/shortcodes/timeline-vertical/
Markdown: https://press.varavel.com/docs/shortcodes/timeline-vertical/index.md

`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

```markdown
{{/* timeline_vertical(title="Roadmap", item_1_date="Step 1", item_1_title="Plan") */}}
```

## Live Example

{{ timeline_vertical(
container="md",
eyebrow="Plan",
title="A clear launch sequence",
description="Pair high-level copy with a structured milestone list.",
item_1_date="Step 01",
item_1_icon="search",
item_1_title="Audit the page",
item_1_desc="Identify the sections and proof points needed.",
item_2_date="Step 02",
item_2_icon="blocks",
item_2_title="Compose shortcodes",
item_2_desc="Assemble clean sections with consistent spacing.",
item_3_date="Step 03",
item_3_icon="rocket",
item_3_title="Ship and iterate",
item_3_desc="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. |