## Timeline

Display chronological events and milestones in vertical or horizontal layouts.

### Vertical Timeline

Classic vertical timeline with alternating sides.

January 2025

#### Launched Quantum Camera Project

Exploration of nanoscale pinhole photography using advanced optics and quantum imaging techniques.

December 2024

#### Trinkets Exhibition Opened

Immersive wearables featured at Design Museum Den Bosch, showcasing interactive fashion technology.

October 2024

#### Demosphere at DDW

Participatory policy prototyping with ten thematic lenses at Dutch Design Week.

HTML

    <div
                class="timeline timeline--vertical"
                style="position: relative; padding-left: 40px"
            >
                <!-- Timeline line -->
                <div
                    style="
                        position: absolute;
                        left: 12px;
                        top: 0;
                        bottom: 0;
                        width: 2px;
                        background: var(--color_line_secondary);
                    "
                ></div>

                <!-- Timeline item -->
                <div
                    class="timeline__item"
                    style="position: relative; padding-bottom: 32px"
                >
                    <div
                        style="
                            position: absolute;
                            left: -34px;
                            width: 16px;
                            height: 16px;
                            background: var(--color_fill_primary);
                            border-radius: 50%;
                            border: 3px solid white;
                            box-shadow: 0 0 0 2px var(--color_fill_primary);
                        "
                    ></div>
                    <div
                        class="timeline__date"
                        style="
                            font-size: 14px;
                            font-weight: 600;
                            color: var(--color_fill_primary);
                            margin-bottom: 8px;
                        "
                    >
                        January 2025
                    </div>
                    <div
                        class="timeline__card"
                        style="
                            padding: 20px;
                            background: var(--color_fill_secondary);
                            border-radius: 12px;
                        "
                    >
                        <h4 style="margin: 0 0 8px; font-size: 18px">
                            Launched Quantum Camera Project
                        </h4>
                        <p
                            style="
                                margin: 0;
                                font-size: 14px;
                                opacity: 0.7;
                                line-height: 1.5;
                            "
                        >
                            Exploration of nanoscale pinhole photography using
                            advanced optics and quantum imaging techniques.
                        </p>
                    </div>
                </div>

                <!-- Timeline item -->
                <div
                    class="timeline__item"
                    style="position: relative; padding-bottom: 32px"
                >
                    <div
                        style="
                            position: absolute;
                            left: -34px;
                            width: 16px;
                            height: 16px;
                            background: var(--color_fill_primary);
                            border-radius: 50%;
                            border: 3px solid white;
                            box-shadow: 0 0 0 2px var(--color_fill_primary);
                        "
                    ></div>
                    <div
                        class="timeline__date"
                        style="
                            font-size: 14px;
                            font-weight: 600;
                            color: var(--color_fill_primary);
                            margin-bottom: 8px;
                        "
                    >
                        December 2024
                    </div>
                    <div
                        class="timeline__card"
                        style="
                            padding: 20px;
                            background: var(--color_fill_secondary);
                            border-radius: 12px;
                        "
                    >
                        <h4 style="margin: 0 0 8px; font-size: 18px">
                            Trinkets Exhibition Opened
                        </h4>
                        <p
                            style="
                                margin: 0;
                                font-size: 14px;
                                opacity: 0.7;
                                line-height: 1.5;
                            "
                        >
                            Immersive wearables featured at Design Museum Den
                            Bosch, showcasing interactive fashion technology.
                        </p>
                    </div>
                </div>

                <!-- Timeline item -->
                <div
                    class="timeline__item"
                    style="position: relative; padding-bottom: 32px"
                >
                    <div
                        style="
                            position: absolute;
                            left: -34px;
                            width: 16px;
                            height: 16px;
                            background: var(--color_fill_primary);
                            border-radius: 50%;
                            border: 3px solid white;
                            box-shadow: 0 0 0 2px var(--color_fill_primary);
                        "
                    ></div>
                    <div
                        class="timeline__date"
                        style="
                            font-size: 14px;
                            font-weight: 600;
                            color: var(--color_fill_primary);
                            margin-bottom: 8px;
                        "
                    >
                        October 2024
                    </div>
                    <div
                        class="timeline__card"
                        style="
                            padding: 20px;
                            background: var(--color_fill_secondary);
                            border-radius: 12px;
                        "
                    >
                        <h4 style="margin: 0 0 8px; font-size: 18px">
                            Demosphere at DDW
                        </h4>
                        <p
                            style="
                                margin: 0;
                                font-size: 14px;
                                opacity: 0.7;
                                line-height: 1.5;
                            "
                        >
                            Participatory policy prototyping with ten thematic
                            lenses at Dutch Design Week.
                        </p>
                    </div>
                </div>
            </div>

### Centered Timeline

Timeline with items alternating left and right.

2025

#### Project Alpha Launch

Successfully launched our flagship product to market.

2024

#### Series A Funding

Secured $10M in funding to accelerate growth.

2023

#### Company Founded

Started with a small team and big dreams.

HTML

    <div
                class="timeline timeline--centered"
                style="position: relative; padding: 20px 0"
            >
                <!-- Center line -->
                <div
                    style="
                        position: absolute;
                        left: 50%;
                        top: 0;
                        bottom: 0;
                        width: 2px;
                        background: var(--color_line_secondary);
                        transform: translateX(-50%);
                    "
                ></div>

                <!-- Left item -->
                <div style="display: flex; margin-bottom: 40px">
                    <div style="flex: 1; padding-right: 40px; text-align: right">
                        <div
                            style="
                                padding: 20px;
                                background: white;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 12px;
                                display: inline-block;
                                text-align: left;
                                max-width: 300px;
                            "
                        >
                            <span
                                style="
                                    font-size: 12px;
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                2025
                            </span>
                            <h4 style="margin: 8px 0; font-size: 16px">
                                Project Alpha Launch
                            </h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Successfully launched our flagship product to
                                market.
                            </p>
                        </div>
                    </div>
                    <div
                        style="
                            position: relative;
                            width: 20px;
                            display: flex;
                            justify-content: center;
                        "
                    >
                        <div
                            style="
                                width: 14px;
                                height: 14px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                            "
                        ></div>
                    </div>
                    <div style="flex: 1"></div>
                </div>

                <!-- Right item -->
                <div style="display: flex; margin-bottom: 40px">
                    <div style="flex: 1"></div>
                    <div
                        style="
                            position: relative;
                            width: 20px;
                            display: flex;
                            justify-content: center;
                        "
                    >
                        <div
                            style="
                                width: 14px;
                                height: 14px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                            "
                        ></div>
                    </div>
                    <div style="flex: 1; padding-left: 40px">
                        <div
                            style="
                                padding: 20px;
                                background: white;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 12px;
                                display: inline-block;
                                max-width: 300px;
                            "
                        >
                            <span
                                style="
                                    font-size: 12px;
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                2024
                            </span>
                            <h4 style="margin: 8px 0; font-size: 16px">
                                Series A Funding
                            </h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Secured $10M in funding to accelerate growth.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Left item -->
                <div style="display: flex; margin-bottom: 40px">
                    <div style="flex: 1; padding-right: 40px; text-align: right">
                        <div
                            style="
                                padding: 20px;
                                background: white;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 12px;
                                display: inline-block;
                                text-align: left;
                                max-width: 300px;
                            "
                        >
                            <span
                                style="
                                    font-size: 12px;
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                2023
                            </span>
                            <h4 style="margin: 8px 0; font-size: 16px">
                                Company Founded
                            </h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.7">
                                Started with a small team and big dreams.
                            </p>
                        </div>
                    </div>
                    <div
                        style="
                            position: relative;
                            width: 20px;
                            display: flex;
                            justify-content: center;
                        "
                    >
                        <div
                            style="
                                width: 14px;
                                height: 14px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                            "
                        ></div>
                    </div>
                    <div style="flex: 1"></div>
                </div>
            </div>

### Horizontal Timeline

Scrollable horizontal timeline for compact displays.

Q1 2023
Research & Planning
Q2 2023
Design Phase
Q3 2023
Development
Q4 2023
Testing & QA
Q1 2024
Launch 🚀
HTML

    <div
                class="timeline timeline--horizontal"
                style="position: relative; overflow-x: auto; padding: 40px 20px"
            >
                <div
                    style="
                        display: flex;
                        gap: 60px;
                        position: relative;
                        min-width: max-content;
                    "
                >
                    <!-- Timeline line -->
                    <div
                        style="
                            position: absolute;
                            top: 8px;
                            left: 0;
                            right: 0;
                            height: 2px;
                            background: var(--color_line_secondary);
                        "
                    ></div>

                    <!-- Item 1 -->
                    <div
                        style="
                            position: relative;
                            text-align: center;
                            width: 150px;
                        "
                    >
                        <div
                            style="
                                width: 16px;
                                height: 16px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                                margin: 0 auto 16px;
                            "
                        ></div>
                        <div style="font-weight: 600; margin-bottom: 4px">
                            Q1 2023
                        </div>
                        <div style="font-size: 14px; opacity: 0.7">
                            Research & Planning
                        </div>
                    </div>

                    <!-- Item 2 -->
                    <div
                        style="
                            position: relative;
                            text-align: center;
                            width: 150px;
                        "
                    >
                        <div
                            style="
                                width: 16px;
                                height: 16px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                                margin: 0 auto 16px;
                            "
                        ></div>
                        <div style="font-weight: 600; margin-bottom: 4px">
                            Q2 2023
                        </div>
                        <div style="font-size: 14px; opacity: 0.7">
                            Design Phase
                        </div>
                    </div>

                    <!-- Item 3 -->
                    <div
                        style="
                            position: relative;
                            text-align: center;
                            width: 150px;
                        "
                    >
                        <div
                            style="
                                width: 16px;
                                height: 16px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                                margin: 0 auto 16px;
                            "
                        ></div>
                        <div style="font-weight: 600; margin-bottom: 4px">
                            Q3 2023
                        </div>
                        <div style="font-size: 14px; opacity: 0.7">
                            Development
                        </div>
                    </div>

                    <!-- Item 4 -->
                    <div
                        style="
                            position: relative;
                            text-align: center;
                            width: 150px;
                        "
                    >
                        <div
                            style="
                                width: 16px;
                                height: 16px;
                                background: var(--color_fill_primary);
                                border-radius: 50%;
                                margin: 0 auto 16px;
                            "
                        ></div>
                        <div style="font-weight: 600; margin-bottom: 4px">
                            Q4 2023
                        </div>
                        <div style="font-size: 14px; opacity: 0.7">
                            Testing & QA
                        </div>
                    </div>

                    <!-- Item 5 -->
                    <div
                        style="
                            position: relative;
                            text-align: center;
                            width: 150px;
                        "
                    >
                        <div
                            style="
                                width: 16px;
                                height: 16px;
                                background: var(--color_state_success);
                                border-radius: 50%;
                                margin: 0 auto 16px;
                            "
                        ></div>
                        <div
                            style="
                                font-weight: 600;
                                margin-bottom: 4px;
                                color: var(--color_state_success);
                            "
                        >
                            Q1 2024
                        </div>
                        <div style="font-size: 14px; opacity: 0.7">Launch 🚀</div>
                    </div>
                </div>
            </div>

### Timeline with Icons

Timeline using icons to indicate event types.

🚀
Product Launch Jan 15, 2025

Successfully launched v1.0 to production with zero downtime.

🎯
10K Users Milestone Dec 20, 2024

Reached 10,000 active users within the first month.

👥
Team Expansion Nov 1, 2024

Hired 5 new engineers to accelerate development.

HTML

    <div
                class="timeline timeline--icons"
                style="position: relative; padding-left: 60px"
            >
                <div
                    style="
                        position: absolute;
                        left: 20px;
                        top: 0;
                        bottom: 0;
                        width: 2px;
                        background: var(--color_line_secondary);
                    "
                ></div>

                <!-- Event: Launch -->
                <div style="position: relative; padding-bottom: 32px">
                    <div
                        style="
                            position: absolute;
                            left: -50px;
                            width: 40px;
                            height: 40px;
                            background: var(--color_state_success);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 18px;
                        "
                    >
                        🚀
                    </div>
                    <div
                        style="
                            padding: 16px 20px;
                            background: var(--color_fill_secondary);
                            border-radius: 10px;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 8px;
                            "
                        >
                            <strong>Product Launch</strong>
                            <span style="font-size: 12px; opacity: 0.6">
                                Jan 15, 2025
                            </span>
                        </div>
                        <p style="margin: 0; font-size: 14px; opacity: 0.8">
                            Successfully launched v1.0 to production with zero
                            downtime.
                        </p>
                    </div>
                </div>

                <!-- Event: Milestone -->
                <div style="position: relative; padding-bottom: 32px">
                    <div
                        style="
                            position: absolute;
                            left: -50px;
                            width: 40px;
                            height: 40px;
                            background: var(--color_state_info);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 18px;
                        "
                    >
                        🎯
                    </div>
                    <div
                        style="
                            padding: 16px 20px;
                            background: var(--color_fill_secondary);
                            border-radius: 10px;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 8px;
                            "
                        >
                            <strong>10K Users Milestone</strong>
                            <span style="font-size: 12px; opacity: 0.6">
                                Dec 20, 2024
                            </span>
                        </div>
                        <p style="margin: 0; font-size: 14px; opacity: 0.8">
                            Reached 10,000 active users within the first month.
                        </p>
                    </div>
                </div>

                <!-- Event: Team -->
                <div style="position: relative; padding-bottom: 32px">
                    <div
                        style="
                            position: absolute;
                            left: -50px;
                            width: 40px;
                            height: 40px;
                            background: var(--color_state_warning);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 18px;
                        "
                    >
                        👥
                    </div>
                    <div
                        style="
                            padding: 16px 20px;
                            background: var(--color_fill_secondary);
                            border-radius: 10px;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 8px;
                            "
                        >
                            <strong>Team Expansion</strong>
                            <span style="font-size: 12px; opacity: 0.6">
                                Nov 1, 2024
                            </span>
                        </div>
                        <p style="margin: 0; font-size: 14px; opacity: 0.8">
                            Hired 5 new engineers to accelerate development.
                        </p>
                    </div>
                </div>
            </div>

### Compact Timeline

Minimal timeline for activity feeds.

John commented on Issue #42 2h ago
Sarah merged PR #128 4h ago
Mike opened Issue #43 6h ago
Lisa pushed 3 commits to `main` 1d ago
HTML

    <div
                class="timeline timeline--compact"
                style="position: relative; padding-left: 24px"
            >
                <div
                    style="
                        position: absolute;
                        left: 4px;
                        top: 8px;
                        bottom: 8px;
                        width: 1px;
                        background: var(--color_line_secondary);
                    "
                ></div>

                <div style="position: relative; padding: 8px 0">
                    <div
                        style="
                            position: absolute;
                            left: -20px;
                            width: 8px;
                            height: 8px;
                            background: var(--color_fill_primary);
                            border-radius: 50%;
                        "
                    ></div>
                    <div style="display: flex; justify-content: space-between">
                        <span>
                            <strong>John</strong>
                            commented on
                            <a href="#">Issue #42</a>
                        </span>
                        <span style="font-size: 13px; opacity: 0.6">2h ago</span>
                    </div>
                </div>

                <div style="position: relative; padding: 8px 0">
                    <div
                        style="
                            position: absolute;
                            left: -20px;
                            width: 8px;
                            height: 8px;
                            background: var(--color_state_success);
                            border-radius: 50%;
                        "
                    ></div>
                    <div style="display: flex; justify-content: space-between">
                        <span>
                            <strong>Sarah</strong>
                            merged
                            <a href="#">PR #128</a>
                        </span>
                        <span style="font-size: 13px; opacity: 0.6">4h ago</span>
                    </div>
                </div>

                <div style="position: relative; padding: 8px 0">
                    <div
                        style="
                            position: absolute;
                            left: -20px;
                            width: 8px;
                            height: 8px;
                            background: var(--color_state_warning);
                            border-radius: 50%;
                        "
                    ></div>
                    <div style="display: flex; justify-content: space-between">
                        <span>
                            <strong>Mike</strong>
                            opened
                            <a href="#">Issue #43</a>
                        </span>
                        <span style="font-size: 13px; opacity: 0.6">6h ago</span>
                    </div>
                </div>

                <div style="position: relative; padding: 8px 0">
                    <div
                        style="
                            position: absolute;
                            left: -20px;
                            width: 8px;
                            height: 8px;
                            background: var(--color_fill_secondary);
                            border-radius: 50%;
                        "
                    ></div>
                    <div style="display: flex; justify-content: space-between">
                        <span>
                            <strong>Lisa</strong>
                            pushed 3 commits to
                            <code>main</code>
                        </span>
                        <span style="font-size: 13px; opacity: 0.6">1d ago</span>
                    </div>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!