Timeline

Display chronological events with dates and descriptions

Pro Feature

The Timeline element requires a Pro or Agency license. Learn about licensing.

Overview

The Timeline element displays events in a chronological vertical layout, perfect for company histories, project milestones, process steps, or career experiences. Each entry includes a date, title, and description with a connecting line and decorative dots.

Timelines support three layout options: left (all entries on the right of the line), right (all entries on the left of the line), or alternating (entries switch sides). Each entry can have a color accent for visual distinction.

The default classes include relative for proper positioning of the vertical line connecting all timeline entries.

Settings

Configure the Timeline element using these Inspector options:

Setting Description Default
Items Array of timeline entries with dates, titles, and descriptions. 3 sample milestones
Layout Entry alignment relative to the timeline line. Options: left, right, alternating. left
Line Color Background color class for the vertical connecting line. bg-gray-300
Dot Size Size classes for the timeline marker dots. w-4 h-4
Card Class CSS classes for each timeline entry card. bg-white rounded-lg shadow p-4 mb-6

Additional Styling Classes

These classes control the appearance of timeline content:

Setting Description Default
Date Class CSS classes for the date text. text-sm font-semibold text-gray-600 mb-2
Title Class CSS classes for the entry title. text-lg font-bold mb-1
Description Class CSS classes for the description text. text-gray-600

Item Structure

Each timeline item in the items array contains these properties:

Property Description Example
date Display date or time period for the event. "2020", "Jan 2024", "Q1 2025"
title Event or milestone title. "Company Founded"
description Detailed description of the event. "We started with a small team..."
color Accent color for the timeline dot. Options: blue, green, purple, red, yellow, gray. "blue"

Examples

Company History Timeline

Display your organization's milestones with left-aligned entries.

{
  "items": [
    {
      "date": "2018",
      "title": "Founded",
      "description": "Started with a vision to revolutionize the industry.",
      "color": "blue"
    },
    {
      "date": "2020",
      "title": "Series A Funding",
      "description": "Raised $5M to expand our team and product.",
      "color": "green"
    },
    {
      "date": "2023",
      "title": "100K Customers",
      "description": "Reached our first major customer milestone.",
      "color": "purple"
    },
    {
      "date": "2024",
      "title": "Global Expansion",
      "description": "Opened offices in Europe and Asia.",
      "color": "blue"
    }
  ],
  "layout": "left",
  "lineColor": "bg-gray-300"
}

Alternating Layout Timeline

Create visual interest by alternating entries on each side of the timeline.

{
  "layout": "alternating",
  "lineColor": "bg-primary",
  "dotSize": "w-5 h-5",
  "cardClass": "bg-white rounded-xl shadow-md p-6"
}

Process Steps Timeline

Show a step-by-step process or workflow as a timeline.

{
  "items": [
    {
      "date": "Step 1",
      "title": "Discovery",
      "description": "We learn about your business goals and requirements.",
      "color": "blue"
    },
    {
      "date": "Step 2",
      "title": "Design",
      "description": "Our team creates mockups and prototypes for review.",
      "color": "purple"
    },
    {
      "date": "Step 3",
      "title": "Development",
      "description": "We build your solution with clean, maintainable code.",
      "color": "green"
    },
    {
      "date": "Step 4",
      "title": "Launch",
      "description": "Your project goes live with full support.",
      "color": "yellow"
    }
  ],
  "layout": "left",
  "cardClass": "bg-gray-50 rounded-lg border border-gray-200 p-4 mb-4"
}
Design Tip

Use consistent color accents to categorize timeline events. For example, blue for milestones, green for achievements, and purple for product launches. This helps users quickly scan and understand your timeline.

Next Steps