--- title: Introducing the CLEAN timeline module (plus Kevin’s life story) description: Learn how the new timeline module for CLEAN can help you map out your company’s processes or events with style. image: https://blog.helpfulhero.com/hubfs/Blog-Post-Image---3.png --- 1 min read # Introducing the CLEAN timeline module (plus Kevin’s life story) [![Picture of Miriam-Rose LeDuc](https://blog.helpfulhero.com/hubfs/Miriam-8sq.jpg) Miriam-Rose LeDuc ](https://blog.helpfulhero.com/author/miriam-rose-leduc) : October 20, 2021 [design](https://blog.helpfulhero.com/tag/design) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [CLEAN Theme Updates](https://blog.helpfulhero.com/tag/clean-theme-updates) [CMS](https://blog.helpfulhero.com/tag/cms) ![Introducing the CLEAN timeline module (plus Kevin’s life story)](https://blog.helpfulhero.com/hubfs/Blog-Post-Image---3.png) **Table of Contents** [Heading](https://blog.helpfulhero.com/introducing-the-clean-timeline-module#) [Heading](https://blog.helpfulhero.com/introducing-the-clean-timeline-module#) 2022 is around the corner, and what better way to ring in the new year than with a fresh CLEAN feature? Today you’ll learn how the new timeline module can help you map out your company’s processes or events with style (and we know you got style - you got CLEAN!).  So let’s strut down the timeline runway, shall we? I’ll show you how it works. To add a timeline module to your web page, head to your page editor, search under modules for Timeline and use the drag-and-drop feature to bring it over to the page. ![giphy](https://blog.helpfulhero.com/hs-fs/hubfs/Imported%20sitepage%20images/giphy.gif?width=480&name=giphy.gif) You’ll see two types of content in the new module: Year Bubbles (the visual milestones) and Events (the small landmarks along the way). You can name these bubbles and events anything you want. If I want to summarize a timeline of Kevin’s life story, for example, I might start with something like this: ![example_timeline](https://blog.helpfulhero.com/hubfs/Screen%20Shot%202021-10-20%20at%201-29-56%20PM-png.png) (Did you know Kevin used to be a DJ? Wild, right??) Alright, let’s stay on target. For a balanced design, you can stagger your events on either side of the line. And, as you can see in the example, you can add images too! Fancy. Last but not least, you can customize your colors and typography to your heart’s desire. Go nuts. And BOOM! Now you’ve got the chops to go add a timeline module to your own website. And got some fun facts in the process. :) Want to see the live action demo?  Check out the video below. - [Tweet](https://twitter.com/share) [![How to boost your website with HubSpot themes](https://blog.helpfulhero.com/hubfs/boost-website.jpg) ](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes) #### [How to boost your website with HubSpot themes](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes) ![Picture of Miriam-Rose LeDuc](https://blog.helpfulhero.com/hs-fs/hubfs/Miriam-8sq.jpg?width=30&name=Miriam-8sq.jpg) [Miriam-Rose LeDuc](https://blog.helpfulhero.com/author/miriam-rose-leduc) HubSpot’s CMS is a powerful hub for designing and organizing your web content. For those of us non-developers, though, the idea of learning this... [design](https://blog.helpfulhero.com/tag/design) [template updates](https://blog.helpfulhero.com/tag/template-updates) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [CLEAN Theme Updates](https://blog.helpfulhero.com/tag/clean-theme-updates) [CMS](https://blog.helpfulhero.com/tag/cms) [Read More](https://blog.helpfulhero.com/how-to-boost-your-website-with-hubspot-themes) [![Save This: The Shortcut You Need](https://blog.helpfulhero.com/hubfs/My%20project%20(4).jpg) ](https://blog.helpfulhero.com/website-shortcut) #### [Save This: The Shortcut You Need](https://blog.helpfulhero.com/website-shortcut) ![Picture of Kevin Fremon](https://blog.helpfulhero.com/hs-fs/hubfs/photos/kevin-fremon-avatar-2017-small.jpg?width=30&name=kevin-fremon-avatar-2017-small.jpg) [Kevin Fremon](https://blog.helpfulhero.com/author/kevin-fremon) What if you could shave hours off your website build? HubSpot's saved sections help you create mini templates that you can copy from one page to... [design](https://blog.helpfulhero.com/tag/design) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [CMS](https://blog.helpfulhero.com/tag/cms) [productivity](https://blog.helpfulhero.com/tag/productivity) [web design](https://blog.helpfulhero.com/tag/web-design) [Read More](https://blog.helpfulhero.com/website-shortcut) [![10 Steps to Redesigning Your Website Like a Pro](https://blog.helpfulhero.com/hubfs/10-steps-to-redesign-your-website-like-a-pro.jpg) ](https://blog.helpfulhero.com/10-steps-to-redesigning-your-website-like-a-pro) #### [10 Steps to Redesigning Your Website Like a Pro](https://blog.helpfulhero.com/10-steps-to-redesigning-your-website-like-a-pro) ![Picture of Kevin Fremon](https://blog.helpfulhero.com/hs-fs/hubfs/photos/kevin-fremon-avatar-2017-small.jpg?width=30&name=kevin-fremon-avatar-2017-small.jpg) [Kevin Fremon](https://blog.helpfulhero.com/author/kevin-fremon) Taking on a website redesign project can be both terrifying and thrilling at the same time. In this article I'm going to break down the ten key steps... [design](https://blog.helpfulhero.com/tag/design) [tutorial](https://blog.helpfulhero.com/tag/tutorial) [UX](https://blog.helpfulhero.com/tag/ux) [Read More](https://blog.helpfulhero.com/10-steps-to-redesigning-your-website-like-a-pro)