# 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 |