Product Overview
Summarise and compare information
Demo - Use two columns for pros and cons e.g. X vs X
The product or idea you want to promote
Your strongest argument
Explain the reason why your product or idea is valuable.
The product or idea you want to oppose
The main weakness
Explain why the product or idea is problematic.
Present coverage options with three columns
What's covered?
The most important benefit
The eye is naturally drawn here first. So lead with your strongest, most eye-catching selling point.
What's not covered
Important policy exclusion
Highlight policy exclusions that readers need to be aware of.
Extensions
Optional coverage option
Tell readers about any additional coverages that are available.
Add an optional call-to-action button
You can direct users to relevant content. Use language that inspires users to take action.
Icon guidance
Tick
A positive, like a key selling point.
Cross
A negative or lack of something, e.g. a policy exclusion.
Plus
Something extra or an add-on, like a policy extension.
Overview
Summarise and compare information
You can use the Product Overview to present information in multiple columns. Featuring large copy and illustrative icons, the component draws the eye and is easy for users to scan.
It’s ideal for side-by-side comparison. For example:
- Showcasing coverage options e.g. what's covered, not covered, or optional
- Presenting the pros and cons of a product, service, or idea
However, if all your points include numbers and statistics, Stats and Facts is a better option.
How to use it
Product Overview is made up of two elements:
- Product column
- Listing (these make up the rows)
The component supports a maximum of three columns. You must use at least two columns, as the purpose of the Product Overview is to compare information side-by-side.
Here’s how to use it.
Optional: Write the feature heading
The feature heading sets up what the Product Overview is about. You may not need it, but it’s there to add clarity if you do.
For readability, the feature heading must not occupy a full line. Use no more than seven words (45 characters).
Step 1: Create the columns
Product Overview supports up to three columns. Select ‘add product column’ to build your desired number of columns.
Write the column headings
The column heading should add context to the points below. For example, the headings to compare a product could be:
- What’s covered?
- What’s not covered?
- Optional extras
Headings must not run onto a second line. Use no more than five words (25 characters).
Optional: Write subheadings
You can add subheadings to provide additional context. Don’t let subheadings run onto a second line. Use a maximum of eight words (40 characters).
If you add a subheading to one column, you must add a subheading to the others to maintain a balanced appearance.
Step 2: Add copy to the rows (listings)
Each row supports up to 255 characters of text.
It’s important to maintain symmetry between rows. Make the text in parallel rows occupy the same number of lines, plus or minus a line.
Optional: Include a call to action
You can add a call-to-action button. Use the ‘CTA button URL’ text field to add your chosen URL. You can search for the page and select from the dropdown, or paste the URL into the text field.
Use the ‘link text’ field to add your button copy. Make it clear and actionable, like ‘find out more’ or ‘get in touch’.
Step 3: Choose an appropriate icon
Use the dropdown menu to pair your row with an icon. You can use different icons for each point, but make sure the icon suits the point you’re making (see the icon guidance for more information).
Do's and don'ts
Do
Maintain symmetry
Parallel rows should occupy the same number lines, plus or minus a line.
Don't
Don’t use a single column
You need at least two columns for the component to function correctly.