--- title: Flexible TimeLine Module Documentation --- [![681b0d97a2aa6735a63327b8\_brand-white-logo](https://hsmarketplace.shunyavkash.com/hubfs/Imported%20images/681b0d97a2aa6735a63327b8_brand-white-logo.svg "681b0d97a2aa6735a63327b8_brand-white-logo")](https://hsmarketplace.shunyavkash.com/home-1?hsLang=en) - [Examples](https://hsmarketplace.shunyavkash.com/modules/flexible-timeline?hsLang=en) - [How to use](https://hsmarketplace.shunyavkash.com/modules/flexible-timeline/how-to-use) [Install Now](https://app-na2.hubspot.com/ecosystem/242471527/marketplace/modules/flexible-timeline-module-by-shunyavkash) # Flexible TimeLine Documentation - [How to Use](https://hsmarketplace.shunyavkash.com/modules/flexible-timeline/how-to-use#how_to_use) - [Content Customization](https://hsmarketplace.shunyavkash.com/modules/flexible-timeline/how-to-use#content_customization) - [Style Customization](https://hsmarketplace.shunyavkash.com/modules/flexible-timeline/how-to-use#style_customization) ##### Supported Browsers Overview | ![chrome-img](https://hsmarketplace.shunyavkash.com/hubfs/chrome-img.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![edge-icon](https://hsmarketplace.shunyavkash.com/hubfs/edge-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 79 and above | ![firefox-icon](https://hsmarketplace.shunyavkash.com/hubfs/firefox-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![brew](https://hsmarketplace.shunyavkash.com/hubfs/brew.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 1.0 and above | ![opera\_6124994](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/opera_6124994.png?width=512&height=512&name=opera_6124994.png) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 60 and above | ![safari-icon](https://hsmarketplace.shunyavkash.com/hubfs/safari-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 12 and above | | --- | --- | --- | --- | --- | --- | ### **How to Use** **Installation**: Navigate to Marketing \> File & Templates \> Design Tools \> @marketplace \> Shunyavkash folder to find the  Flexible TimeLine. Install it. ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-26-2025-05-00-08-0308-AM.png?width=432&height=383&name=image-png-Jul-26-2025-05-00-08-0308-AM.png) **Integration**: In the Marketing section, choose Website Menu \> Website Pages and add the "Flexible TimeLine" module to the page you want. ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-26-2025-04-58-34-6188-AM.png?width=289&height=114&name=image-png-Jul-26-2025-04-58-34-6188-AM.png) ### Content Customization ###### The module offers 4 distinct timeline styles: 1. Classic Vertical Timeline 2. Compact Modern Cards 3. Left-Aligned Timeline 4. Right-Aligned Timeline ###### Each timeline entry consists of the following customizable elements: Card Content: - **Title**: Main heading for each timeline item - **Description**: Rich text content supporting formatted text, links. - **Image**: Optional image for each timeline entry . - **Year/Label**: Date, year, or custom label for timeline positioning. ###### Global Button (Optional): - **Button Label:** Custom text for the call-to-action button - **Button Link**: URL, email, phone number, or HubSpot CTA - **Link Behavior**: Option to open in new tab - **Button Placement**: Appears on all timeline cards when enabled. ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-28-2025-10-08-19-7254-AM.png?width=379&height=759&name=image-png-Jul-28-2025-10-08-19-7254-AM.png) ![Group 22](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Group%2022.png?width=379&height=1414&name=Group%2022.png) ### Style Customization ###### Container Settings - **Default**: Responsive width with auto margins - **Options**: Custom pixel values (e.g., 1200px) #### Each timeline variant has its own comprehensive style settings: ###### Classic Vertical Cards: - Alternating left/right card layout - Central vertical line with connecting dots - Balanced spacing for desktop and mobile ###### Compact Modern Cards: - Streamlined card design with minimal spacing - Arrow-style connectors between cards and timeline - Optimized for content-heavy timelines ###### Left Aligned Timeline - All content aligned to the left side - Timeline line positioned on the left - Great for process flows and step-by-step guides ###### Right Aligned Timeline - All content aligned to the right side - Timeline line positioned on the right - Ideal for historical timelines and achievements ### Card Styling Options ###### Background & Border - **Background Color:** color picker with transparency - **Border Corner:** Rounded corners (0-50px radius) - **Border:** Custom advanced border styling - **Shadow Options**: Box shadow with X/Y offset, blur, and color ###### Content Spacing - **Content Spacing**: Internal padding for card content - **Outer Spacing**: Margin between cards and timeline line - **Title Bottom Spacing**: Space below card titles - **Image Bottom Spacing**: Space below images ###### Typography - **Title CSS**: Complete font styling for card titles - **Description CSS**: Font styling for card descriptions - **Custom CSS**: Advanced styling options ###### Year/Label Styling - **Background Color**: Label background with CSS gradients support - **Inner Spacing**: Padding inside label containers - **Shadow Options**: Custom shadow effects - **Typography:** Font styling for year/label text ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-26-2025-06-27-43-6870-AM.png?width=378&height=508&name=image-png-Jul-26-2025-06-27-43-6870-AM.png) ![](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/image-png-Jul-26-2025-06-28-34-8036-AM.png?width=383&height=579&name=image-png-Jul-26-2025-06-28-34-8036-AM.png) ### We’re Not Here to Sell, We’re Here to Solve Talk with strategic minds and developers, not just salespeople. Whether it’s your website, product, platform, or automation flow, let’s sketch the blueprint together. No fluff. Just meaningful collaboration. We reply same day. [Explore Together](https://www.shunyavkash.com/) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/brand-white-logo.svg) ![copyrights-logo](https://cdn.prod.website-files.com/67a2f77206cba07f5946da3d/6811cc6a38d66ca841fca6d9_copyrights-logo.svg) 2026 Shunyavkash — All rights reserved | [Privacy Policy](https://www.shunyavkash.com/privacy-policy) | [Cookie Policy](https://www.shunyavkash.com/cookie-policy) | Designed by [Shunyavkash](https://www.shunyavkash.com/) - - -