Comparison table

Use case:

Compare products, services, features, etc. This allows for quick and easy comparison between each offering’s features and characteristics.

Page speed impact:

Low, unless you use very large images for your icons. SVG is recommended if you really need to replace the provided icons.

Available in pages:

Yes

Reserved block class:

comptab

Resources:

css/components/comparison-table.css

js/components/comparison-table.js

js/components/tippy.js

Available as of Version 16.

Important! To make it possible to freeze the first column, we need to make some calculations first. That's why you may experience some delay in updating the table in the page editor, or the table may not look correctly right away. We recommend saving and reloading the page (Cmd/Ctrl+R) whenever that happens; or use HubSpot's reload link that sometimes appears at the bottom of the left sidebar. This only happens in the page editor in certain conditions and so far cannot be avoided. It doesn't happen on your live page. Your web visitors won't experience any such problem.

For the best results, we recommend using Light comparison tables with white backgrounds and Dark comparison tables with Dark backgrounds.