<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=67039&amp;fmt=gif">
Skip to content
Hamburger Menu

CMS Module Live Example

A Timeline

HubSpot-1

Morning Session: HubSpot Fundamentals

- Introduction to HubSpot CRM and Marketing
- Hub Creating and managing contacts and companies
- Building landing pages and forms
- Understanding email marketing best practices

Afternoon Session: Advanced HubSpot Techniques

- Leveraging HubSpot's analytics and reporting tools
- Implementing inbound marketing strategies (SEO, social media, content
marketing)
- Integrating HubSpot with other marketing tools
 

Hands-on Workshops:

- Breakout sessions for participants to practice HubSpot skills and receive
personalized guidance.

Additional Features:

- Networking Opportunities: Provide time for attendees to connect with other
marketers and build relationships.
- Vendor Expo: Showcase relevant marketing tools and services.
- Post-Event Resources: Offer participants access to additional resources, such
as templates, tutorials, and recordings.
 

Documentation

Timeline Module

Module Information

Module name Timeline Module
Version 1.0.1
Compatibility HubSpot CMS
Dependencies AOS (Animate On Scroll) library for optional card animations
Browser support Modern browsers. Scroll animation uses CSS scroll-linked animations (animation-timeline: scroll()). In unsupported browsers the timeline will still render correctly but without the animated line.
Last updated 2026
Latest changes Fixed mobile alignment issue affecting the timeline dots and vertical line positioning.

1. Overview

The Timeline Module is a HubSpot CMS component that displays a vertical, alternating timeline with a scroll-driven animated line. Each timeline element can include an image, headline, date or date range, rich text content, and an optional button.

Cards alternate left and right along a central vertical line that grows as the user scrolls down the page.

2. Features

  • Alternating left/right card layout
  • Scroll-driven animated vertical line
  • Optional AOS card entrance animations
  • Single date or date range per timeline element
  • Optional image support
  • Optional CTA button
  • Fully responsive layout
  • Accessible markup with role="region", role="article", and <time> elements

3. Content Settings

General

Setting Description Options
Starting direction Which side the first card appears on Left, Right
Date format Global date display format dd.MM.YYYY, MM/dd/YYYY, MM.YYYY

Timeline Elements

Each element is a repeatable timeline card with the following fields:

Field Description
Image Optional card image
Date format Single date or date range
Date & time Date for single events
Start / End date & time Dates for range events
Headline Card title text
Headline tag HTML tag used for the headline (h2–h6)
Headline style Visual style class applied to the headline
Content Rich text body content
Show button Toggle visibility of CTA button
Button label Button text
Button link URL, page, file, email, or phone link
Screen reader label Accessible label for assistive technologies

4. Style Settings

Dot Settings

  • Dot position (Top or Center)
  • Dot color
  • Optional border

Line Settings

  • Animated line color

Card Settings

  • Background color
  • Backdrop blur
  • Card padding
  • Column gap
  • Date alignment
  • Border radius
  • Headline, body, and date colors
  • Responsive font sizes

Animation Settings

  • Enable or disable animations
  • Animation effect
  • Easing function
  • Animation duration
  • Animation delay

5. Credits

This module was designed and developed by:

  • Anton Bujanowski
  • Martin Angeletti

6. Changelog

v1.0.1

  • Fix: On mobile, the vertical line and timeline dots were misaligned.