Browse Blocks
Timelines
Tell your story through milestones.
Horizontal milestones
A horizontal story that becomes a vertical timeline on mobile.
View Code
<section class="site-section timeline-section" aria-labelledby="timeline-title">
<h2 id="timeline-title" class="visually-hidden">
Our story
</h2>
<ol class="timeline-list">
<li>
<div class="timeline-date">
<time datetime="2022-03">
Mar 2022
</time>
</div>
<h3>
An idea takes shape
</h3>
<p class="muted">
A small team comes together to make everyday work feel simpler.
</p>
</li>
<li>
<div class="timeline-date">
<time datetime="2023-06">
Jun 2023
</time>
</div>
<h3>
The first launch
</h3>
<p class="muted">
Early customers help turn a promising idea into a product they rely on.
</p>
</li>
<li>
<div class="timeline-date">
<time datetime="2024-09">
Sep 2024
</time>
</div>
<h3>
Growing together
</h3>
<p class="muted">
New tools and a growing community open up more ways to create.
</p>
</li>
<li>
<div class="timeline-date">
<time datetime="2026-01">
Jan 2026
</time>
</div>
<h3>
A wider horizon
</h3>
<p class="muted">
Teams around the world bring their next chapter to life.
</p>
</li>
</ol>
</section>With side introduction
A short company story alongside a vertical sequence of milestones.
View Code
<section
class="site-section timeline-section timeline-side"
aria-labelledby="timeline-side-title"
>
<header class="timeline-intro">
<p class="eyebrow">
Our story
</p>
<h2 id="timeline-side-title">
Small beginnings.
<br>
New possibilities.
</h2>
<p class="muted">
A few defining moments in a journey shaped by people, curiosity, and the work we do together.
</p>
</header>
<ol class="timeline-list timeline-vertical">
<li>
<div class="timeline-date">
<time datetime="2022-03">
Mar 2022
</time>
</div>
<h3>
An idea takes shape
</h3>
<p class="muted">
A small team comes together to make everyday work feel simpler.
</p>
</li>
<li>
<div class="timeline-date">
<time datetime="2023-06">
Jun 2023
</time>
</div>
<h3>
The first launch
</h3>
<p class="muted">
Early customers help shape a product built for everyday work.
</p>
</li>
<li>
<div class="timeline-date">
<time datetime="2024-09">
Sep 2024
</time>
</div>
<h3>
Growing together
</h3>
<p class="muted">
New tools and a growing community open up more ways to create.
</p>
</li>
<li>
<div class="timeline-date">
<time datetime="2026-01">
Jan 2026
</time>
</div>
<h3>
A wider horizon
</h3>
<p class="muted">
Teams around the world bring their next chapter to life.
</p>
</li>
</ol>
</section>With alternating images
An illustrated story with alternating text and photography, stacked in chronological order on mobile.
View Code
<section
class="site-section timeline-section timeline-illustrated"
aria-labelledby="timeline-images-title"
>
<header class="timeline-intro">
<p class="eyebrow">
Milestones
</p>
<h2 id="timeline-images-title">
A story still unfolding.
</h2>
<p class="muted">
The places, people, and ideas that move us forward.
</p>
</header>
<ol class="timeline-images">
<li>
<div class="timeline-moment">
<div class="timeline-date">
<time datetime="2022-03">
Mar 2022
</time>
</div>
<h3>
An idea takes shape
</h3>
<p class="muted">
A small team comes together to make everyday work feel simpler.
</p>
</div>
<figure class="site-media timeline-photo">
<img
src="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=640&q=80 640w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1200&q=85 1200w"
sizes="(max-width: 760px) 100vw, 50vw"
width="1200"
height="900"
alt="Pale concrete buildings framing an open courtyard"
loading="lazy"
decoding="async"
>
</figure>
</li>
<li>
<div class="timeline-moment">
<div class="timeline-date">
<time datetime="2023-06">
Jun 2023
</time>
</div>
<h3>
The first launch
</h3>
<p class="muted">
Early customers help shape a product built for everyday work.
</p>
</div>
<figure class="site-media timeline-photo">
<img
src="https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&w=640&q=80 640w, https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&w=1200&q=85 1200w"
sizes="(max-width: 760px) 100vw, 50vw"
width="1200"
height="900"
alt="Architectural forms and clean geometric lines"
loading="lazy"
decoding="async"
>
</figure>
</li>
<li>
<div class="timeline-moment">
<div class="timeline-date">
<time datetime="2026-01">
Jan 2026
</time>
</div>
<h3>
A wider horizon
</h3>
<p class="muted">
Teams around the world bring their next chapter to life.
</p>
</div>
<figure class="site-media timeline-photo">
<img
src="https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=640&q=80 640w, https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=1200&q=85 1200w"
sizes="(max-width: 760px) 100vw, 50vw"
width="1200"
height="900"
alt="Modern architecture in natural light"
loading="lazy"
decoding="async"
>
</figure>
</li>
</ol>
</section>