Every other timeline module ships a single layout. Process Timeline Pro does five — and styles every pixel from the editor. Works with or without images. The connector never breaks on wrap.
Pick the shape your content needs — steps, timeline, milestones, cards, or a tracker — without installing five different modules.
A geometric, product-marketing treatment — Space Grotesk, an indigo accent, rounded markers on a cool grey field.
A warm, magazine treatment — Playfair Display headings on cream, ink dots with a single gold milestone. No images: it collapses to text and a connector, never empty boxes.
A friendly SaaS treatment — Poppins, an emerald accent, soft-shadow cards with images on a mint field. Three across, then two, then one.
Getting started
Big step numbers carry the sequence — no connector spine. The current step is highlighted.
We map your goals, audience and tech stack in a 45-minute session, so the build starts with a plan instead of a guess.
Our team sets up your workspace, imports your data and wires every integration while you carry on with your week.
We launch together, walk your team through the dashboard, and stay on call through your first month in production.
Careers
Markers down the left, content and a per-step image on the right. A dark treatment in Sora with a sky-blue accent — same module, inverted.
Send a CV and a short note. No cover-letter theatre — tell us one problem you solved and how.
A 30-minute call to swap context — what you want next, what the role actually is. Both sides opt in.
A paid, real-world exercise close to the actual job. No whiteboard trivia, no take-home that eats your weekend.
A decision within 48 hours and a transparent offer. References on request, not as a hurdle.
A status treatment — a violet accent on lavender, the track filled to the current node. Horizontal on desktop, vertical on mobile; the highlight follows.
Each theme above is the same module with different settings. To make the point directly, here is one identical layout in three treatments — only the Style tab changed.
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 the module renders semantic, accessible markup with styled markers and connectors. Every visible value is an editor field wired through CSS variables — there is no CSS to write, and nothing is hardcoded. Vanilla JavaScript, no jQuery, no animation library, under 8KB.
The failure modes that earn timeline modules their one-star reviews are the things this module is built around:
Pick the marker style once for the whole module: auto numbers (1, 2, 3), Roman (I, II, III), letters (A, B, C), a per-item icon, or a plain dot / node. Icons can be one of eighteen bundled inline SVGs (check, arrow, star, flag, rocket, gear, shield, chart and more) or your own uploaded SVG/image. Shapes: circle, square, rounded square, diamond, or none. Size, border and colors are all yours, with a separate color set for the highlighted / current step.
Independent typography for the eyebrow, title, body and date/number (a global base font sets the family; each element inherits it unless you override). Colors for every text element, marker, connector, card and section background, plus a dedicated highlight set. Connector style (solid / dashed / dotted / none), thickness and color. Spacing, padding, card radius, optional shadow, and section padding. Columns per breakpoint and an editable mobile breakpoint.
Optionally emit HowTo JSON-LD for genuine step-by-step processes (it can earn rich results), or ItemList for ranked lists and milestones. It is off by default and you opt in deliberately — emitting HowTo on a company-history timeline would be wrong, so the editor makes you choose. Item titles get auto-generated IDs so every step is deep-linkable.
Ordered lists for sequential processes (screen readers announce the order), unordered for non-sequential; a configurable heading level (H2/H3/H4) for item titles so the page outline stays correct; decorative markers are hidden from assistive tech; CTA links have visible focus states. Animations use IntersectionObserver (never scroll math), animate only transform/opacity, and fully honor prefers-reduced-motion. Images are lazy-loaded with a reserved aspect ratio so nothing shifts on load.
No. Everything lives in the module — no HubDB, no serverless functions, no CRM fields.
Yes. It ships its own scoped styles and depends on no theme variables, so it looks the same on any theme or none.
Yes — that is a first-class state. With no images the layout collapses cleanly to text plus connector, no empty boxes.
No. Horizontal collapses to a vertical stack and the connector turns vertical; alternating folds to a single side.
No. Under 8KB of vanilla JS, no jQuery, no animation library, IntersectionObserver only, transform/opacity animations.
