Overview
The Comparison cards section allows you to display up to four side-by-side cards that compare key features, options or offerings. This layout is ideal for pricing tables, package comparisons, feature breakdowns, or highlighting differences between services.
Each card includes a title, description, optional icon, a list of comparison points, and an optional call-to-action button.
Example
How to add
In the page editor, add a new section.
Select Comparison cards from the list of available paragraph types.
Inside the section, you can add between 1 and 4 cards.
Fill in the fields for each card (see field list below).
Reorder cards if needed to adjust the layout.
Fields
Each card contains the following fields:
Field | Purpose | Notes |
Pre title text | Optional text for the top card to help distinguish | Keep short and clear |
Title | The main heading of the card | Keep short and clear |
Description | Supporting text under the title | Recommended max: ~130 characters |
Price / Label field | Optional highlighted value (e.g. £199 / “Free”) | Recommended max: ~28 characters |
Comparison points | List of bullet points or key features | Each point should be concise (max ~255 characters per item) |
Icon (optional) | Displays above the title | Use simple, consistent imagery. |
Button label & link (optional) | Adds a call-to-action at the bottom of the card | Only use when an action is expected (e.g. ‘Register’, ‘Learn more’).” |
Behaviour & Layout
Device | Layout |
Desktop | Cards display in a row (up to 4 across) |
Mobile | Cards stack into a single column |
Additional behaviors:
All cards are equal height so layouts stay aligned.
If 4 cards are added, font sizes are adjusted slightly to maintain balance.
If only 1 or 2 cards are used, they centre automatically within the available space.
| 
| 
|
Best practice
Keep titles short and descriptions clear — aim for quick scanning.
Use consistent phrasing across comparison points (e.g. all starting with verbs or features).
Avoid mixing too many visual styles — if using icons, keep them uniform.
Only add buttons where an action is expected (e.g. “Register” / “Learn more”).