Key Points

Reinforce your message with a visual aid

Demo exampleOverviewIcon guidanceHow to use itDo's and don'ts

Short heading introducing what's to follow

You can add extra context with a short line of body text.

Heading of your best point

Put your strongest point or most important information first.

Next-best point heading

Then follow with your second most important point.

Make points punchy

And keep supporting copy brief and no more than 22 words.

Maintain balance

Make each point occupy the same number of lines, plus or minus one line.

Match icons to each point

Tick

A positive (e.g. a key selling point).

Cross

A negative or lack of something (e.g. a policy exclusion).

Plus

Something extra or an add-on (e.g. a policy extension).

Information

For extra insights or additional relevant information.

Overview

Reinforce your message with a visual aid

You can use Key Points to highlight and summarise ideas, facts, and statistics, alongside an illustrative icon. 

Icons help to convey your message in an economical way, while making the page more engaging. Quickly recognisable, they add visual variety, as visual cues offer a different type of stimulus.

When to use

Key Points is ideal for:

  • Highlighting the services you provide
  • Comparing information, such as coverage options
  • Emphasising information you don’t want users to miss

When not to use

If all your points include numbers and statistics, go for the Stats and Facts component instead.

How to use it

Step 1: Write the section heading

The section heading sets up the context of the key points. For example:

  • What does cyber insurance cover?

The heading must not run onto a second line. Keep to a maximum of about six words (27 characters).

You can also add a short line of body text to provide extra context using the ‘description’ text field. Don’t run onto a second line. That gives you a maximum of 160 characters (about 30 words).

Step 2: Add the key points item heading

The key point heading sets up the point you wish to make. For example, you might introduce a type of coverage:

  • Incident response

For this component to look balanced, all your key point headings must have the same number of lines. Make sure your headings don’t run onto a second line. That gives you a maximum of about five words (23 characters).

Step 3: Choose a suitable icon

You can use the dropdown menu to pair your points with an icon. Make sure the icon is appropriate for the point you’re making (see the above icon guidance for more information).

Icons are, however, optional. If they don't suit the points you're making, don't add them.

Step 4: Add your supporting copy

Complete the ‘subtext’ text field to add your supporting copy. The supporting copy gives context to the heading. If your heading is ‘incident response’, for example, the subtext might be:

  • Covers the costs of assessing the scope and impact of a cyber incident, including forensic analysis, legal advice, and incident response support.  

The supporting copy must not run onto a fifth line. That’s a maximum of approximately 22 words (156 characters).

Do's and don'ts

Do

  • Aim for balance

    This component looks best if the headings and copy are similar lengths.

Don't

  • Don’t add more than nine points

    Adding too many points (and icons) can dilute the usefulness and attention-grabbing nature of this component.

  • Don't overdo icon variations

    This works best with one or two types of icon, e.g. all ticks, or all ticks and crosses, per component.