Studio Nope Get the module →
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. Step 01

    Connect your data

    Link your CRM, ad accounts and analytics in a few clicks. No engineering, no CSV exports.

  2. Step 02

    Map your funnel

    Define the stages that matter to your business. Drag, drop and rename — the model updates instantly.

  3. Step 03

    See true attribution

    Every touch, every channel, scored by real contribution to revenue — not last-click guesswork.

  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

    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

    Build & configure

    Our team sets up your workspace, imports your data and wires every integration while you carry on.

  3. Go live

    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

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.