Timeline
Display chronological events and milestones in vertical or horizontal layouts.
Vertical Timeline
Classic vertical timeline with alternating sides.
January 2026
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="ss-c-timeline ss-c-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="ss-c-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="ss-c-timeline__date"
style="
font-size: 14px;
font-weight: 600;
color: var(--color_fill_primary);
margin-bottom: 8px;
"
>
January 2026
</div>
<div
class="ss-c-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="ss-c-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="ss-c-timeline__date"
style="
font-size: 14px;
font-weight: 600;
color: var(--color_fill_primary);
margin-bottom: 8px;
"
>
December 2024
</div>
<div
class="ss-c-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="ss-c-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="ss-c-timeline__date"
style="
font-size: 14px;
font-weight: 600;
color: var(--color_fill_primary);
margin-bottom: 8px;
"
>
October 2024
</div>
<div
class="ss-c-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.
2026
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="ss-c-timeline ss-c-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);
"
>
2026
</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="ss-c-timeline ss-c-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.
HTML
<div
class="ss-c-timeline ss-c-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, 2026
</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.
HTML
<div
class="ss-c-timeline ss-c-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>