Comparison Pricing Table
A full-width feature comparison table with pricing cards above, plan headers, section groups, checkmarks, and a mobile layout that stacks by feature — no horizontal scrolling.
Overview
Comparison Pricing Table is built for SaaS pages that lead with pricing cards and a detailed feature matrix. Cards show plan highlights above the table; the comparison table below keeps the same responsive structure.
On mobile, the table transforms into a feature-by-feature layout — each feature shows all plans stacked vertically with plan name, price, CTA, and value. No pinch-to-scroll required.
Features
- Pricing cards above comparison table (toggle on/off)
- Card layouts — grid, featured center, featured left, stacked
- Up to 6 pricing plans in cards and comparison table
- Responsive mobile layout — stacks by feature, not horizontal scroll
- Grouped feature sections with custom section headers
- Checkmark / X icons via yes/no values, or plain text cells
- Plan headers with name, price, and CTA button per column
- Monthly / yearly billing toggle with savings badge
- Feature tooltips on comparison rows
- Table styles — bordered, minimal, or compact
- Configurable mobile breakpoint (640px, 768px, 991px)
- Section width, padding, heading size & alignment
- Custom colors — background, table, borders, section headers, buttons
- Scroll animations — fade, slide, or scale
- Custom ID and Custom CSS Class (Advanced settings)
How it differs from Premium Pricing Table
Premium Pricing Table (#2) uses separate pricing cards plus a scrollable comparison table on mobile. Comparison Pricing Table (#3) is comparison-first: the table is the entire pricing UI, and mobile restructures into readable feature blocks instead of scrolling sideways.
Requirements
No third-party accounts or API keys. Works on HubSpot CMS landing pages and website pages with drag-and-drop areas.