Skip to content
Comparison table
Section overview
The comparison table section displays tabular data to compare features, specifications, or benefits across different products, services, or brands. It provides a structured way to highlight differences and similarities.
Common use cases
- Product feature comparison between your brand and competitors
- Pricing plan comparisons showing different tiers of service
- Technical specification comparison for related products
- Membership or subscription tier comparison
Usage tips
- Keep row labels concise and clear to maintain readability
- Use consistent symbols or icons across columns for visual consistency
- Consider highlighting your brand's column with the column border option
- On mobile, the table reformats to a more vertical layout for better readability, with each row displaying as a block with label-value pairs
Section settings
| Setting | Description |
|---|---|
| Table headings | Comma-separated list of column headings (e.g., "Your brand, Competitor 1, Competitor 2") |
| Heading | Optional section heading text |
| Content | Rich text content to display above the table |
| Button label | Text to display on the optional call-to-action button |
| Button URL | Link destination for the call-to-action button |
| Top spacing | Adjusts the padding above the section (0-300px) |
| Bottom spacing | Adjusts the padding below the section (0-300px) |
| Color scheme | Controls the background color theme of the section |
| Custom color | Sets a custom background color when "Custom" is selected in color scheme |
| Text color | Determines text color treatment (default, force light, or force dark) |
| Border color | Sets the color treatment for section borders |
| Button color | Controls the style and color of the section's button |
| Enable color fade | When enabled, the section changes the page background color when scrolled into view |
| Border position | Determines where borders appear around the section |
| Column border | Highlights a specific column with a border (first, second, third, or fourth) |
| X alignment | Controls the horizontal alignment of section content |
| Enable margin | When enabled, applies horizontal margin to the section |
| Enable split | Separates the header content and table into a two-column layout |
| Enable split heading | Shows the section heading in a split layout |
| Visibility | Controls whether the section appears on all devices, only mobile, or only desktop |
Block settings
Content block
Content blocks create individual rows in the comparison table with a feature label and values for each column.
Block limit: 50
| Setting | Description |
|---|---|
| Label | The row label that describes the feature or benefit being compared |
| Tooltip | Optional extra information that appears when hovering over a question mark icon |
| Icon | Optional icon to display next to the label |
| Column 1 content | Text to display in the first column for this row |
| Column 1 icon | Optional icon to display next to the content in the first column |
| Column 2 content | Text to display in the second column for this row |
| Column 2 icon | Optional icon to display next to the content in the second column |
| Column 3 content | Text to display in the third column for this row |
| Column 3 icon | Optional icon to display next to the content in the third column |
| Column 4 content | Text to display in the fourth column for this row |
| Column 4 icon | Optional icon to display next to the content in the fourth column |
| Color scheme | Controls the background color of this specific row |