Skip to content
Comparison table
Section overview
The Comparison Table section creates a responsive, customizable table for comparing product features, services, or brand offerings across multiple columns. It provides a clear visual representation of differences between items.
Common use cases
- Product feature comparisons to highlight advantages over competitors
- Service tier comparisons (basic vs premium vs enterprise)
- Subscription plan comparisons to showcase different pricing tiers
- Specification comparisons between related products
Usage tips
- Keep feature labels in the first column clear and concise
- Use consistent formatting across all columns for better readability
- Consider highlighting your primary offering with column borders
- Include tooltips for complex features that need additional explanation
- Use icons strategically to visually reinforce information
Mobile responsiveness considerations
- The table automatically adapts to a stacked layout on mobile devices
- Column headers become hidden on mobile and are shown inline with values
- Consider how many columns you include, as more columns create more scrolling on mobile
Section settings
| Setting | Description |
|---|---|
| Table headings | Comma-separated list of column headings for your comparison table |
| Heading | Main heading text for the section |
| Content | Descriptive text content to display above the table |
| Button label | Text for optional call-to-action button |
| Button URL | Link destination for the call-to-action button |
| Top spacing | Controls vertical padding above the section (0-300px) |
| Bottom spacing | Controls vertical padding below the section (0-300px) |
| Color scheme | Sets the background and text color theme for the section |
| Border color | Sets the color style for borders (subtle or strong) |
| Button color | Sets the visual style for the call-to-action button |
| Border position | Controls where borders appear around the section (none, top, bottom, or both) |
| Column border | Highlights a specific column with borders (none, first, second, third, or fourth) |
| Horizontal alignment | Controls how content aligns horizontally (left, center, or right) |
| Visibility | Controls section display based on device (all devices, mobile only, or desktop only) |
Block settings
Content block
Each content block represents a row in the comparison table, containing a feature label and corresponding values for each column. Limited to 50 blocks per section.
| Setting | Description |
|---|---|
| Label | Text describing the feature being compared |
| Tooltip | Optional explanatory text that appears on hover |
| Icon | Optional icon to display before the label |
| Column 1 content | Text content for the first column |
| Column 1 icon | Optional icon to display in the first column |
| Column 2 content | Text content for the second column |
| Column 2 icon | Optional icon to display in the second column |
| Column 3 content | Text content for the third column |
| Column 3 icon | Optional icon to display in the third column |
| Column 4 content | Text content for the fourth column |
| Column 4 icon | Optional icon to display in the fourth column |
| Color scheme | Sets the background and text color for this specific row |