The kit
Elements [30]
Fancy Comparison Table
Parent / child element
Fancy Comparison Table
A feature comparison or pricing table with a column per plan or product, shared feature rows, check and cross icons and a highlighted column. Six designs, each with a price, badge and button in the column header.
Designs
6 designs
Value icons
Check / cross or dot
Column header
Title, price, badge
Classic
Boxed
Minimal
Gradient
Elevated Cards
Ribbon
All six designs share the same row, column and colour settings. Switch between them with the Design option.
Example of fancy comparison table with striped rows, dot icons and centred row labels…
Example of fancy comparison table without prices, with a table title and a featured column…
Example of fancy comparison table with a narrow label column and custom typography…
Use cases
Key features
What the element does, in plain terms. Every individual control is listed in the settings reference below.
Layout
Six designs
Classic, Boxed, Minimal, Gradient, Elevated Cards and Ribbon, each built from the same rows and columns.
Responsive table
On small screens the table scrolls sideways, so every column stays readable.
Rows and columns
Shared row labels
Feature rows are added, removed and reordered once on the parent, and every column follows the same order.
Values and icons
Type yes, true or 1 for a check icon, and no, false or 0 for a cross. An empty cell shows a dash, and any other text or number is shown as written. Switch the icons to dots if you prefer.
Column headers
Each column has a title, subtitle, currency, price and period, plus a button with its own label and link.
Highlighting
Featured column
Mark a column as featured to give it a badge, such as Popular, and its own header, body and border colours.
Striped rows
Alternate the background of every other row to make long tables easier to scan.
Styling
Typography
Separate font settings for column titles, row text and prices.
Colour controls
Header, label, row, border, icon, price, button and badge colours, plus a list of column band colours for the Gradient, Elevated Cards and Ribbon designs.
Settings reference
Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.
Structure General tab
Design
Classic · Boxed · Minimal · Gradient · Elevated Cards · Ribbon
How the comparison table looks. Default Classic.
Comparison Columns
Child elements
Add, reorder, clone or remove columns. Each column has its own settings, listed below.
Table Title
Text
An optional heading shown above the table. Leave empty to hide it.
Row Labels
Sortable list
The feature rows, shared by every column. Add, remove and reorder them here once.
Striped Rows
No · Yes
Classic and Ribbon only. Alternates the background of every other row. Default No.
Value Icon Style
Check / Cross · Dot
How yes and no values are displayed. Default Check / Cross.
Column Title Tag
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for each column title. Default H3.
Row Label Column Width
Number. Default 220
The width of the left-hand feature label column, in pixels.
Row Label Alignment
Left · Center · Right
The horizontal alignment of the feature labels. Default Left.
Element Visibility
Small · Medium · Large screen
Shows or hides the element on small, medium or large screens.
CSS Class
Adds a class to the wrapping HTML element.
CSS ID
Adds an ID to the wrapping HTML element.
Typography General tab
Title Typography
Font family, weight, size, line height, letter spacing
Font settings for the column titles.
Row Typography
Font family, weight, size, line height, letter spacing
Font settings for the row labels and values.
Price Typography
Font family, weight, size, line height, letter spacing
Font settings for the prices in the column headers.
Comparison Column Child element, one per column
Column Title
Text
The name of the plan or product, for example Basic.
Subtitle
Text
An optional short label under the title.
Currency
Text, for example $
The currency symbol shown before the price.
Price
Text, for example 29
The price amount. Leave empty to hide it for a plain feature comparison.
Period
Text, for example /mo
The billing period shown after the price.
Row Values
Sortable list
One value per row, in the same order as the parent’s row labels. Yes, true or 1 shows a check, no, false or 0 shows a cross, and empty shows a dash. Any other text is shown as written.
Featured
Yes · No
Highlights this column as the recommended one. Default No.
Badge Text
Text
The label on the featured badge. Defaults to Popular. Shown when Featured is Yes.
Button Label
Text
The text on the call-to-action button. Leave empty to hide the button.
Button Link
Link
Where the button points.
Button Target
Same Window · New Window
Opens the link in the same or a new tab. Default Same Window.
Table colours Design tab
Table Title Color
Colour. Default #1a1a1a
The colour of the optional table title.
Table Background
Colour. Default #ffffff
The background of the table body.
Border Color
Colour. Default #e6e6e6
The colour of the table outline and row dividers.
Border Radius
Number. Default 12
The corner rounding of the table. Set 0 for sharp corners.
Header Background
Colour. Default #1e3a5f
The background of the column header band.
Header Text Color
Colour. Default #ffffff
The colour of the column titles, subtitles and prices.
Row Label Background
Colour. Default #f7f9fb
The background of the left-hand label column.
Row Label Text Color
Colour. Default #1a1a1a
The colour of the feature labels.
Row Text Color
Colour. Default #4a4a4a
The colour of text values in the cells.
Alternate Row Background
Colour. Default #f7f9fb
The background of every other row. Used when Striped Rows is on, and always by the Gradient design.
Gradient Header Colors
Comma-separated colours
Gradient, Elevated Cards and Ribbon only. One colour per column band: the first is used for the corner cell, and the list repeats across extra columns.
Values and buttons Design tab
Check Color
Colour. Default #3fb95d
The colour of the yes icon.
Cross Color
Colour. Default #d64545
The colour of the no icon.
Price Color
Colour. Default #ffffff
The colour of the price in each column header.
Accent Color
Colour. Default #65bc7b
The default button colour and badge background.
Button Background
Colour
The button fill. Leave empty to use the accent colour.
Button Text Color
Colour. Default #ffffff
The text colour of the buttons.
Featured column Design tab
Featured Header Background
Colour
The header band of the featured column. Leave empty to use the accent colour.
Featured Column Background
Colour
The body of the featured column. Leave empty to use the design default.
Featured Border Color
Colour
The outline of the featured column. Leave empty to use the accent colour.
Badge Background
Colour
The background of the featured badge. Leave empty to use the accent colour.
Badge Text Color
Colour. Default #ffffff
The text colour of the featured badge.
On this page