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

7 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 -->