Comparison Table Section
Use Comparison Table to compare 2 to 4 options side by side. This section is designed for packages, tiers, programs, or feature sets.
Best use cases
- Service plan tiers
- Warranty package comparison
- Trim or feature comparisons
- “Good, better, best” offers
What you need before you start
- The 2 to 4 options you want to compare
- The list of features you want to list as rows
- A decision on which option should be highlighted (optional)
How the structure works
A comparison table has:
- Columns: the options being compared
- Rows: the features or items you are comparing
Fields and how to fill them
Content above table (optional)
If available:
- Show content above table
- Content
- Content horizontal position
Use this for a heading and a one-line explanation.
Columns (required)
Each column typically includes:
- Label: the column header
- Is primary column: highlights one column visually
- Optional color settings per column
Practical guidance:
- Use 3 columns for “good, better, best”.
- Use the primary column for the option you want most visitors to choose.
List items (rows)
Each row typically includes:
- Label: the feature name
- Included and excluded values across columns
Practical guidance:
- Keep row labels short.
- Group similar features together.
Icons and styling (optional)
Depending on your configuration, you may be able to customize:
- Included icon
- Excluded icon
- Primary icon
- Table colors and grid line color
Validation and common issues
- You must have 2 to 4 columns.
- Column labels are required.
- Each row must match the number of columns. If you change the number of columns later, you may need to update your rows.
Recommended configurations
- Service tier table: 3 columns, primary column on the recommended tier
- Two-option comparison: 2 columns, fewer rows, keep labels concise