--- title: Process Timeline Pro — Process, Steps & Timeline Module for HubSpot description: "One HubSpot module, five layouts: horizontal steps, vertical timeline, alternating, numbered cards, and a progress tracker. Clean and fully styleable from the editor. Font Awesome icons, works with or without images, no jQuery, under 8KB JS." --- [![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/website) HubSpot CMS Module # Process, steps & timeline. One module, five layouts. A clean, monochrome timeline that bends to your content. Pick a layout, drop in your steps — every marker, connector and font is set from the editor. 5 layoutsFont Awesome iconsNo jQueryUnder 8KB JSFully responsive 01 · How it works ## Four steps from signup to insight Numbered steps across a row with a hairline connector that draws in. Clean monochrome out of the box; collapses to a vertical stack on mobile. 1. 1 Step 01 ### Connect your data Link your CRM, ad accounts and analytics in a few clicks. No engineering, no CSV exports. 2. 2 Step 02 ### Map your funnel Define the stages that matter to your business. Drag, drop and rename — the model updates instantly. 3. 3 Step 03 ### See true attribution Every touch, every channel, scored by real contribution to revenue — not last-click guesswork. 4. 4 Step 04 ### Optimize spend Shift budget to the campaigns driving pipeline and cut the ones that don't. Teams cut waste by a third. 02 · Vertical timeline ## How hiring works here Markers down the left, content to the right — filled emerald icon markers and a connector that draws in. A different font and accent, all from module settings. 1. Step 1 ### Apply Send a CV and a short note. No cover-letter theatre — tell us one problem you solved and how. 2. Step 2 ### Intro screen A 30-minute call to swap context — what you want next, what the role actually is. 3. Step 3 ### Working session A paid, real-world exercise close to the actual job. No whiteboard trivia, no weekend take-home. 4. Step 4 ### Offer A decision within 48 hours and a transparent offer. References on request, not as a hurdle. 03 · Alternating timeline ## Eight years, in milestones Content alternates left and right of a center spine, dates as the markers in signal orange. The spine draws in; on mobile it folds to a single side. - 2017 ### Founded in a co-working loft Three engineers, one shared frustration with attribution tools, and a working prototype by the first quarter. - 2019 ### Series A, 12M raised Led by Northstar Ventures. We doubled the team and shipped the real-time pipeline that still powers the product. - 2021 ### 10,000 customers From scrappy startup to category contender. Crossed five figures of paying teams and opened a London office. - 2023 ### Global expansion Data residency in three regions and round-the-clock support. The enterprise logos that needed compliance said yes. - 2025 ### The AI release Predictive budget allocation, shipped. Customers act on recommendations the moment a campaign starts to slip. 04 · Numbered cards ## You are live in three steps A responsive grid of cards — full-bleed image on top, a blue numbered marker and copy below. Three across, then two, then one; the current step is accented. 1. ![Kickoff call](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-1.jpg) 1 ### Kickoff call We map your goals, audience and tech stack in a 45-minute session, so the build starts with a plan. 2. ![Build and configure](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-2.jpg) 2 ### Build & configure Our team sets up your workspace, imports your data and wires every integration while you carry on. 3. ![Go live](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-3.jpg) 3 ### Go live We launch together, walk your team through the dashboard, and stay on call for the first month. 05 · Progress tracker ## Where your order is Completed and current steps fill in the accent; upcoming steps stay outlined. Items reveal first, then the track and progress draw in. 1. #### Order placed We have your order and payment. A confirmation is on its way to your inbox. 2. #### Packed Your items are picked, checked and boxed at our fulfilment centre. 3. #### Shipped On the road with the courier. Track it live — estimated arrival in two days. 4. #### Delivered Dropped at your door. We will email a receipt and a quick way to start a return. ## Overview Process Timeline Pro is a single, self-contained section for HubSpot CMS that covers every common “sequence” pattern: a how-it-works row, a vertical timeline, an alternating milestone spine, a grid of numbered cards, and a progress tracker. Add your steps in one repeater, pick a layout, and it renders clean, accessible markup. Every value is an editor field — there is no CSS to write and nothing is hardcoded. Vanilla JavaScript, no jQuery, under 8KB. --- ## The five layouts - **Horizontal steps** — 3–5 across with a connector; collapses to a vertical stack on mobile. - **Vertical timeline** — markers down the left, content to the right; great with or without images. - **Alternating** — content left/right of a center spine; folds to a single side on mobile. - **Numbered cards** — a responsive grid with step numbers and optional images; columns per breakpoint. - **Progress / tracker** — a node bar filled to the current step; horizontal on desktop, vertical on mobile. --- ## Markers & icons Pick the marker style for the whole module: auto **numbers**, **Roman**, **letters**, a per-item **icon**, or a plain **dot**. Icons use the native HubSpot **Font Awesome** picker — choose any icon per step. Shapes: circle, square, rounded square, diamond, or none. --- ## Styled from the editor One base font sets the family; each element (eyebrow, title, body, date) inherits it or takes its own. Colors for the accent, markers, connectors, cards and background; connector style and thickness; spacing, card radius and shadow; columns and breakpoints. The defaults are a clean monochrome system — install it and it looks finished, restyle it whenever you want. --- ## Accessibility, SEO & performance Ordered lists for sequential processes, a configurable heading level for item titles, visible focus states, and decorative markers hidden from assistive tech. Optional `HowTo` / `ItemList` JSON-LD (off by default) with deep-linkable step IDs. Animations use IntersectionObserver, animate only transform/opacity, and honor `prefers-reduced-motion`. Images lazy-load with a reserved aspect ratio. --- ## FAQ ### Does it need HubDB or a backend? No. Everything lives in the module — no HubDB, no serverless, no CRM fields. ### Does it work on any theme? Yes. It ships its own scoped styles and inherits your theme fonts and primary color where it makes sense. ### Can I use it without images? Yes — that is the default. With no images it collapses cleanly to text plus connector. ### Will the connector break on mobile? No. Horizontal collapses to a vertical stack and alternating folds to a single side. © Studio Nope — Process Timeline Pro for HubSpot CMS. [Get the module →](https://ecosystem.hubspot.com/marketplace/website)