Docs / Content Layouts / Horizontal Timeline

Horizontal Timeline

A side-scrolling row of dated milestones with a progress line and clickable dots that swap a content panel below the timeline. Use it for company history, product roadmaps, multi-step processes, or project phases where the reader benefits from advancing one step at a time.

View live preview → Jump to settings ↓

→ Start Here

The high-level controls that set the shape of the timeline before you touch individual milestones: whether the heading shows, where the heading aligns, whether each step's content panel is image+text or text-only, and which side the image sits on.

Show Section Heading

Toggle Default: On

Controls whether the section heading area (badge h6, title h2, description p) appears above the timeline. Turn it off when the timeline directly follows a stronger heading and you want it to read as a continuation.

Heading Alignment (Desktop)

Select Default: Center Shown when: Show Section Heading is on

Text alignment for the heading area on desktop (993px and above).

  • left Left
  • center Center (default)
  • right Right

Heading Alignment (Mobile)

Select Default: Center Shown when: Show Section Heading is on

Text alignment for the heading area on mobile (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.

Content Panel Layout

Select Default: Image + Text

How each milestone renders its details below the dot row. Image + Text matches the Image & Text module: an image paired with the rich-text body. Text Only renders the rich-text body inside a bordered card with no image.

  • image_text Image + Text (default)
  • text_only Text Only

Image Position

Select Default: Right Shown when: Content Panel Layout is Image + Text

Which side of the content panel the image appears on. The rich text takes the other side.

  • right Image right, text left (default)
  • left Image left, text right

Heading Max Width

Number (0-1920px) Default: 900px Shown when: Show Section Heading is on

Caps the width of the heading block. Useful for keeping long descriptions readable on wide screens. Set to 0 for no cap.

/// Content

The section heading and the timeline's milestones. The Timeline Items repeater holds 1-6 steps; each step controls its own labels, content, icon, image, and per-step colors.

Section Heading

Rich text Default: blox Theme / Horizontal Timeline / one-line description Shown when: Show Section Heading is on

The badge + title + description block above the timeline. The default markup is <h6> (rendered as a pill badge when Badge Style is on), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge stays compact.

Timeline Items

Group (repeater, 1-6 items) Default: 4 items (Discovery, Design, Build, Launch)

The list of milestones rendered on the timeline. Editors can add up to 6 steps. Each step exposes its own labels, rich text, icon, image, and color overrides. The selected dot scales up with a subtle glow and the progress line fills proportionally to the active step. Visitors advance with the prev/next arrows or by clicking any dot.

Show Top Label

Toggle Default: On

Shows the smaller label above the dot row for this step (typically the step number, year, or date).

Show Bottom Label

Toggle Default: On

Shows the larger label below the dot row for this step (typically the milestone title).

Top Label

Text Default: Step Shown when: Show Top Label is on

The text that sits above the dot. Use for short context: "Step 1", "2019", "Q1", "Phase A".

Bottom Label

Text Default: Milestone Shown when: Show Bottom Label is on

The text that sits below the dot. Use for the milestone name itself: "Discovery", "Launch", "Series A".

Content

Rich text Default: Milestone title + descriptive paragraph

The body for the content panel that renders below the dot row when this step is selected. Supports headings, paragraphs, lists, links, and CTA buttons. Use the theme's CTA classes (cta-primary, cta-secondary, cta-tertiary) on inline links to render them as styled buttons.

Dot Icon

Icon (FontAwesome 6.4.2) Default: circle-check

The icon rendered inside the dot. Only used when Dot Style (under Style Settings) is set to Icon. Defaults rotate per step in the placeholder data (magnifying-glass, pen-ruler, hammer, rocket) to signal the icon swaps per milestone.

Content Image

Image Default: accordion-N.png placeholder Shown when: Content Panel Layout is Image + Text

The image for the content panel when this step is active. Responsive sizing is on by default. Upload a 1200×800 (or larger) image so the panel can scale without softness.

Tip: Use a unique filename when you replace this image; HubSpot's CDN caches by URL, so overwriting with the same name can leave visitors seeing the stale image for hours.

Active Dot Color

Color Default: #1a1a1a @ 100%

The fill color of this step's dot when it is the active step.

Inactive Dot Color

Color Default: #8B8B8B @ 100%

The fill color of this step's dot when it is not active. Set on a per-step basis so editors can hint at progress or completion state with color.

Content Border Color

Color Default: #1a1a1a @ 100% Shown when: Content Panel Layout is Text Only

Border color of the content card when the layout is Text Only. Ignored in Image + Text mode.

Content Background Color

Color Default: #fafafa @ 100% Shown when: Content Panel Layout is Text Only

Background fill of the content card when the layout is Text Only. Ignored in Image + Text mode.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #our-story) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Everything visual: the inner container chrome, the dot row, the progress line and labels, the badge styling for the heading, section dividers, and the row's background/width/spacing.

/// Container Style

Background, border, shadow, padding, and corner radius for the inner timeline container that wraps both the dot row and the content panel.

Container Background

Color Default: #ffffff @ 100%

Fill color of the inner timeline container.

Corner Radius

Slider (0-60px) Default: 12px

Rounded corners on the container. 12px matches the theme's default tile rounding.

Container Padding (Desktop)

Slider (0-120px) Default: 60px

Inner padding on all sides of the container on desktop.

Container Padding (Mobile)

Slider (0-80px) Default: 24px

Inner padding on all sides of the container on mobile. Lower than desktop so the container does not crowd the viewport edges.

Add Border

Toggle Default: Off

Adds a border around the container. Reveals the border color + width controls.

Border Color

Color Default: #231f20 @ 8% Shown when: Add Border is on

Border color. The 8% opacity default gives a hairline look that does not compete with the content.

Border Width

Slider (1-5px) Default: 1px Shown when: Add Border is on

Thickness of the container border.

Add Shadow

Toggle Default: On

Adds a soft drop shadow under the container. Helps the container lift off the row background.

Shadow Color

Color Default: #000000 @ 5% Shown when: Add Shadow is on

The color + opacity of the drop shadow. Stay under 15% opacity for tasteful shadow.

/// Dot Style

How the dots on the timeline look: their size, their visual treatment (icon / dashed ring / solid fill), and a mobile alignment offset.

Dot Size

Slider (8-60px) Default: 35px

Diameter of the timeline dots in pixels. Mobile dots automatically scale to 80% of this value so they do not dominate a small screen.

Dot Style

Select Default: Icon

Sets the visual treatment for every dot on the timeline.

  • icon Icon (default) - dot is filled and shows the per-step Dot Icon
  • dashed Dashed (ringed) - dot is rendered as a dashed ring
  • solid Solid - dot is a solid filled circle with no icon

Icon Color

Color Default: #ffffff @ 100% Shown when: Dot Style is Icon

Color of the FontAwesome glyph inside the dot.

Icon Size (% of dot)

Slider (20-90%) Default: 40% Shown when: Dot Style is Icon

Sizes the icon as a percentage of the dot diameter so the glyph stays proportional when Dot Size changes.

Mobile Dot Offset

Slider (-30 to 30px) Default: 0px

Fine-tunes horizontal alignment of dots over the vertical timeline line on mobile (positive shifts right, negative shifts left). Use small adjustments to fix sub-pixel drift caused by custom container padding.

/// Timeline Style

Colors for the progress line, the inactive line track, and the labels above and below the dots. Also the border radius for the content panel in Text Only mode.

Progress Line Color

Color Default: #1a1a1a @ 100%

Color of the filled portion of the timeline line (the section from the start through the active dot).

Line Track Color

Color Default: #e0e0e0 @ 100%

Color of the unfilled portion of the timeline line (the section from the active dot to the end).

Top Label Color

Color Default: #666666 @ 100%

Text color for the top label of every step.

Bottom Label Color

Color Default: #1a1a1a @ 100%

Text color for the bottom label of every step.

Content Panel Border Radius

Number (0-60px) Default: 12px Shown when: Content Panel Layout is Text Only

Rounded corners on the content card. Only applies in Text Only mode; in Image + Text mode the panel inherits its image styling.

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Turn off to leave the h6 as raw heading text.

Badge Background

Color Default: #ffffff @ 100% Shown when: Show Badge Styling is on

Fill color of the pill badge.

Badge Border

Color Default: #e0e0e0 @ 100% Shown when: Show Badge Styling is on

Border color of the pill badge.

Badge Text Color

Color Default: #1a1a1a @ 100% Shown when: Show Badge Styling is on

Text color inside the pill badge.

/// Section Dividers

Decorative SVG shapes at the top or bottom of the section, useful for blending into the section above or below.

Top Divider / Bottom Divider

Select Default: None

Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.

  • none No divider (default)
  • wave-1 Wave 1 (Gentle)
  • wave-2 Wave 2 (Sharp)
  • wave-3 Wave 3 (Multi)
  • wave-4 Wave 4 (Smooth)
  • wave-5 Wave 5 (Layered)
  • tilt Tilt (Angled)
  • curve Curve (Arc)
  • triangle Triangle

Each divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px, default 100), and Flip Divider (mirror horizontally).

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

  • none No background (default; section inherits the page bg)
  • color Solid Color - reveals Background Color picker
  • gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
  • image Image - reveals Background Image, Size (cover/contain/original), Position (5-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Group Default: Standard
  • standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
  • slim Slim (narrower variant, also set in Theme Settings)
  • custom Custom - reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

  • desktop 100px top, 100px bottom, 0 left, 0 right
  • tablet 60px top, 60px bottom, 0 left, 0 right
  • mobile 40px top, 40px bottom, 15px left, 15px right