Skip to content

Sequential Process Flow Documention

1. Introduction (Overview)

Sequential Process Flow is a modern HubSpot module designed to showcase workflows, timelines, and step-by-step processes using animated connector lines and interactive card layouts. The module includes flexible card box styles, responsive design, smooth animations, and a left-side content section with support for two customizable buttons.

2. Key Features

  • Animated SVG connector lines
  • Interactive sequential card flow
  • Left-side content section with heading and description
  • Support for two customizable buttons
  • Multiple card box style variations
  • Icon, number, or simple card layouts
  • Fully responsive design
  • Dynamic repeater card support

3. Installation – Downloading the Module from HubSpot Marketplace

  • Log in to your HubSpot account.
  • Go to the Marketplace from the main navigation menu.
  • Search for your module by name.
  • Find the module in the results and click Install.
  • If it’s a paid module, you can also click Buy Now to purchase and install directly.

4. How to Use – Adding the Module to Your Page

  • Open your HubSpot page editor.
  • Click on Add Module.
  • Search for your module by name.
  • Drag and drop the module into the desired section of your page.
  • Sequential Process Flow is an interactive HubSpot module with animated connector lines, responsive card layouts, flexible content sections, and customizable buttons for modern workflows.

5. Module Settings Guide

1. Content Tab 

  • Add Left Block
    Add heading, description, and two customizable buttons for flexible left-side content.
  • Add Multiple Card Boxes
    Add multiple card boxes with customizable titles and descriptions.
  • Add Content Type
    Choose between index number, HubSpot icon, custom icon, or no icon style.

Group 1000002363

2. Style Tab

  • Left block customization: heading font, color, size, line height, spacing, and description styling
  • Button customization: font size, text color, background color, border radius, padding, and button spacing
  • Card box customization: title, description, index number, icon styling, background color, spacing, and box shadow
  • Typography controls: font size, color, font weight, and line height options
  • Icon customization: icon size, icon color, and icon background color settings
  • Animated line customization: line color and stroke width controls
  • Module layout settings: choose custom width or full-width layout
  • Background customization: background color and background image options
  • Responsive spacing controls: separate spacing settings for desktop and mobile devices

 

Group 469449 (1)

 

6. Examples / Demo Preview

View the module in action: https://www.modfrybus.shop/sequential-process-flow

7. Support & Contact

For questions or support, contact us at productqueriemodfrybus@outlook.com We’re happy to help!