Comparison Matrix Pro for HubSpot

Getting Started

Comparison Matrix Pro is a standalone HubSpot module. No theme required. Drag it into any page template to build professional product and feature comparison tables with collapsible categories, billing toggles, tooltips, scroll animations, and full visual control from 80+ style settings.

Installation

1. After purchase, the module appears in your Design Manager under marketplace-modules/Comparison Matrix Pro.module.
2. Open any page in the Page Editor or add it to a template in the Design Manager.
3. Drag Comparison Matrix Pro from the module list into your page.
4. The module renders with 3 default plans and sample features. Replace them with your own content.

Content Structure

The module is organized into Products (the column headers) and Feature Categories (grouped rows). Each category contains individual features with values per product.

Section Heading

Optional heading area above the table. Toggle it off completely with the "Show Section Heading" switch — perfect for pages where the module sits below an existing hero or heading. When enabled:

• Title - Main heading text (e.g. "Compare Plans & Features").
• Subtitle - Secondary text below the title.
• Heading Tag - HTML tag (H1, H2, H3, H4, H5) for SEO and accessibility. Use H1 when this module starts the page.
• Alignment - Center or left-aligned heading.

Products / Plans (2-6)

Add up to 6 products under Content > Products / Plans. Each product has:

• Product Name - Column header label (e.g. Starter, Professional, Enterprise).
• Icon - Optional HubSpot icon displayed above the product name.
• Featured - Highlights the entire column with accent background, top border, and distinct color through all rows including category rows.
• Badge - Text like "Most Popular" or "Best Value" positioned above the product name. Does not affect content alignment.
• Price (First Period) - Display price including currency and suffix, e.g. "$29/mo".
• Price (Second Period) - Alternate price shown when the billing toggle is switched.
• Price Note - Small text below the price, e.g. "billed annually" or "per user".
• CTA Button - Button text, link, and style (Primary, Secondary, or Ghost). Buttons are always bottom-aligned across columns regardless of content height.

Feature Categories (1-10)

Group features into categories under Content > Feature Categories. Each category has:

• Category Name - Row header label (e.g. Core Features, Analytics, Security).
• Collapsible - Allow users to collapse/expand this category with a smooth animation.
• Expanded by Default - Whether the category starts open or closed on page load.

Features (1-30 per category)

Each feature within a category has:

• Feature Name - Row label in the first column.
• Tooltip - Hover/focus tooltip explaining the feature. Keyboard accessible. Leave empty for no tooltip.
• Values per Product - One value per product column. Each value can be:
  • Included (checkmark icon)
  • Not included (cross icon)
  • Partial (dash icon)
  • Custom text (e.g. "Up to 5", "Unlimited", "10 GB")

Billing Toggle

Optional toggle that switches between two pricing periods (e.g. Monthly vs Yearly). When enabled:

• Two labels are shown as clickable tabs with a sliding active indicator.
• Each product has two price fields. The toggle switches which one is visible.
• A discount badge can be shown next to the second option (e.g. "Save 20%").
• You can set which option is active by default.

Disable the toggle to show only the first price for each product.

Table Settings

Configure table behavior under Content > Table Settings:

• Sticky Header Row - Keeps the product header visible when scrolling down long tables. Uses CSS position:sticky with automatic ancestor overflow fixing. Demo 3 above shows a table with sticky header disabled.
• Sticky Feature Column (Mobile) - Freezes the feature names column when scrolling horizontally on smaller screens.
• Striped Rows - Alternating background color on feature rows for readability.
• Row Hover Highlight - Highlights the entire row on mouse hover.
• Bottom CTA Row - Repeats the CTA buttons at the bottom of the table.
• Animate Category Collapse - Smooth slide animation when collapsing and expanding categories. Disable for instant toggle.
• Scroll Reveal Animation - Rows and sections fade in as the user scrolls down. Respects prefers-reduced-motion. Disable for instant rendering.

Style System

78 style controls on the Style tab organized into 13 groups. Every visual property is customizable from the module editor with no hardcoded colors or sizes.

• Fonts - Primary font (title, product names, prices) and Secondary font (features, values, buttons, labels, tooltips, badges). Full Google Fonts picker with auto-loading. Enable "Inherit Fonts from Page" to skip custom fonts and inherit from the page/theme instead.
• Section - Background color, top/bottom padding.
• Container - Maximum width (600-1600px).
• Heading - Title and subtitle colors, font sizes, font weights, bottom margin.
• Table - Background, border color/width/radius, shadow (none/sm/md/lg), cell padding, stripe color, hover color.
• Product Header - Product name and price colors, sizes, weights. Price note color and size.
• Featured Column - Background, header background, border color and width for the highlighted column.
• Badges - Background, text color, font size, border radius.
• Category Headers - Background, text color, font size, font weight.
• Feature Rows - Name and value colors/sizes, checkmark/cross/partial colors, icon size, tooltip background and text colors.
• Buttons - Primary, Secondary, and Ghost styles with separate background, text, hover, and border colors. Font size, weight, padding, border radius, and full-width toggle. Set border radius to 50 for pill buttons (see Demo 2).
• Billing Toggle - Background, text color, active text color, slider color, discount badge colors, border radius.
• Responsive - Tablet and mobile breakpoint controls. Header content, badges, and buttons scale automatically at each breakpoint.

Layout & Responsive

Built with CSS Grid (no HTML tables). Fully responsive with three breakpoints:

• Desktop - Full grid layout. Feature label column (240px) plus equal product columns.
• Tablet - Label column shrinks to 180px. Header text, badges, and buttons scale down. Sticky feature column keeps labels visible during horizontal scroll.
• Mobile - Label column shrinks to 140px. Product columns set a minimum width of 140px with horizontal scroll. All text scales further. Container padding tightens.

Multiple instances on the same page are fully isolated. Each instance has its own fonts, colors, animations, and settings with zero conflicts.

Accessibility

• Semantic HTML - Configurable heading tag (H1-H5), <button> elements for interactive controls.
• ARIA attributes - role="tablist" and role="tab" with aria-selected on billing toggle. aria-expanded on collapsible categories.
• Keyboard navigation - Toggle labels respond to Enter/Space. Category toggles are native <button> elements. Tooltip triggers are focusable with tabindex="0" and aria-label.
• Reduced motion - All scroll and collapse animations are disabled when the user has prefers-reduced-motion: reduce enabled.
• Tooltips - Triggered on hover and focus, positioned to stay within viewport bounds.

Demo Notes

• Demo 1 (SaaS) - 3 columns, Inter font, billing toggle, collapsible categories, featured column with badge, sticky header.
• Demo 2 (Dark) - 4 columns, Space Grotesk + DM Sans fonts, dark background, indigo accent, pill buttons (border-radius: 50), no stripes.
• Demo 3 (Minimal) - 2 columns, Libre Baskerville + Source Sans 3 fonts, no toggle, no badges, no CTA row, sticky header disabled.
• Demo 4 (Wide) - 5 columns, Outfit font, warm palette, orange accent, 1400px container, 2 categories collapsed by default.

Tips

• Keep it scannable - Use checkmarks and crosses where possible. Reserve custom text for values that need specifics.
• Group logically - Organize features into 3-5 categories. Collapse less important categories by default.
• Highlight the right plan - Mark your recommended plan as Featured. Use the Primary button style for its CTA.
• 3-4 products is ideal - More than 5 columns gets cramped on tablet. If you need more, use a wider container.
• Dark mode - Set a dark section background, switch all text/border colors to lighter values, adjust the featured column and stripe colors.
• Custom fonts - Use the Fonts section in Style to set Primary and Secondary fonts per instance. Enable "Inherit Fonts from Page" to use the page/theme fonts instead.
• Pill buttons - Set button border radius to 50 for fully rounded pill-style buttons.