TIMELINES REQUIRES PRO

Our Journey Timeline

Showcase your company’s growth story in style with this 4-step journey timeline. Each milestone is highlighted with clean cards, bold headings, and matching icons — connected by a sleek vertical line that displays the years. Perfect for about pages, company history sections, or any project timeline.

Back to Library

Sep 8, 2025 CREATED

Sep 11, 2025 UPDATED

10 TIMES USED

2014

A Brief History

Started with one person working from home, focusing on early client projects and finding product-market fit.

2016

First Office

Opened our first office and welcomed a growing team, marking a major milestone in our journey.

2018

The Team Grows

Expanded to a team of 20+ talented people, collaborating on exciting projects for global clients.

2022

Global Expansion

Launched international offices and broadened our services, continuing our mission on a global stage.

Pattern Markup

<!-- wp:ub/timeline {"progressLineColor":"#2563eb","contentPadding":{"top":"0","bottom":"0","left":"0","right":"0"},"contentBorder":{"width":"0px","style":"none"},"contentBorderRadius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"},"showOppositeText":true} -->
<!-- wp:ub/timeline-item {"oppositeText":"2014","contentPadding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|x-small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|x-small"},"contentBorder":{"color":"#e5e7eb","width":"1px"},"contentBorderRadius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:ub/icon {"icon":{"iconName":"clock","type":"font-awesome"},"iconColor":"#2563eb"} -->
<div style="--ub-icon-rotation:rotate(0deg);--ub-icon-size:40px;--ub-icon-color:#2563eb;--ub-icon-justification:center;--ub-icon-border-top:  undefined;--ub-icon-border-right:  undefined;--ub-icon-border-bottom:  undefined;--ub-icon-border-left:  undefined" class="wp-block-ub-icon"><div class="ub_icon"><div class="ub_icon_wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"></path></svg></div></div></div>
<!-- /wp:ub/icon -->

<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"uppercase"}},"textColor":"vivid-cyan-blue"} -->
<h5 class="wp-block-heading has-vivid-cyan-blue-color has-text-color" style="text-transform:uppercase">A Brief History</h5>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#374151"}}} -->
<p class="has-text-color" style="color:#374151">Started with one person working from home, focusing on early client projects and finding product-market fit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->

<!-- wp:ub/timeline-item {"oppositeText":"2016","contentPadding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|x-small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|x-small"},"contentBorder":{"color":"#e5e7eb","width":"1px"},"contentBorderRadius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:ub/icon {"icon":{"iconName":"building","type":"font-awesome"},"iconColor":"#2563eb"} -->
<div style="--ub-icon-rotation:rotate(0deg);--ub-icon-size:40px;--ub-icon-color:#2563eb;--ub-icon-justification:center;--ub-icon-border-top:  undefined;--ub-icon-border-right:  undefined;--ub-icon-border-bottom:  undefined;--ub-icon-border-left:  undefined" class="wp-block-ub-icon"><div class="ub_icon"><div class="ub_icon_wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z"></path></svg></div></div></div>
<!-- /wp:ub/icon -->

<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"uppercase"}},"textColor":"vivid-cyan-blue"} -->
<h5 class="wp-block-heading has-vivid-cyan-blue-color has-text-color" style="text-transform:uppercase">First Office</h5>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#374151"}}} -->
<p class="has-text-color" style="color:#374151">Opened our first office and welcomed a growing team, marking a major milestone in our journey.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->

<!-- wp:ub/timeline-item {"oppositeText":"2018","contentPadding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|x-small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|x-small"},"contentBorder":{"color":"#e5e7eb","width":"1px"},"contentBorderRadius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:ub/icon {"icon":{"iconName":"users","type":"font-awesome"},"iconColor":"#2563eb"} -->
<div style="--ub-icon-rotation:rotate(0deg);--ub-icon-size:40px;--ub-icon-color:#2563eb;--ub-icon-justification:center;--ub-icon-border-top:  undefined;--ub-icon-border-right:  undefined;--ub-icon-border-bottom:  undefined;--ub-icon-border-left:  undefined" class="wp-block-ub-icon"><div class="ub_icon"><div class="ub_icon_wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg></div></div></div>
<!-- /wp:ub/icon -->

<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"uppercase"}},"textColor":"vivid-cyan-blue"} -->
<h5 class="wp-block-heading has-vivid-cyan-blue-color has-text-color" style="text-transform:uppercase">The Team Grows</h5>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#374151"}}} -->
<p class="has-text-color" style="color:#374151">Expanded to a team of 20+ talented people, collaborating on exciting projects for global clients.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->

<!-- wp:ub/timeline-item {"oppositeText":"2022","contentPadding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|x-small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|x-small"},"contentBorder":{"color":"#e5e7eb","width":"1px"},"contentBorderRadius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:ub/icon {"icon":{"iconName":"rocket","type":"font-awesome"},"iconColor":"#2563eb"} -->
<div style="--ub-icon-rotation:rotate(0deg);--ub-icon-size:40px;--ub-icon-color:#2563eb;--ub-icon-justification:center;--ub-icon-border-top:  undefined;--ub-icon-border-right:  undefined;--ub-icon-border-bottom:  undefined;--ub-icon-border-left:  undefined" class="wp-block-ub-icon"><div class="ub_icon"><div class="ub_icon_wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z"></path></svg></div></div></div>
<!-- /wp:ub/icon -->

<!-- wp:heading {"level":5,"style":{"typography":{"textTransform":"uppercase"}},"textColor":"vivid-cyan-blue"} -->
<h5 class="wp-block-heading has-vivid-cyan-blue-color has-text-color" style="text-transform:uppercase">Global Expansion</h5>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#374151"}}} -->
<p class="has-text-color" style="color:#374151">Launched international offices and broadened our services, continuing our mission on a global stage.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->
<!-- /wp:ub/timeline -->