Components

Example

Pros and cons (bulleted list)

Use this component when you have clear positives and negatives which can be summarised into bullet points. Ensure there’s an equal amount of copy for each marker.

1. Point count
   There should be an equal number of points in each set of body copy

2. Marker titles
   You can’t rely on the markers alone to dictate the information to users, the title must clearly state whether it’s positive, negative or similar for accessibility

Character guidance

Component title - 40 characters (50 max)
Subtext - 175 characters (265 max)
Marker title - 30 characters (40 max)
Marker copy - 200 characters

Category icons

This component can be used when content can be categorised into different subsections. If you’re using the two column layout only use a number of categories which are divisible by two.

1. Titles
   Marker titles can’t be links. You can add in-line links or provide a tertiary CTA below like in this example

Character guidance

Component title - 35 characters
Subtext - 175 characters (265 max)
Marker title - 30 characters (40 max)
Marker copy - 150 characters

Text only

When a page already uses a lot of visual cues such as markers and icons using text on it’s own can provide some breathing room.

Character guidance

Same as above

Pros and cons (separated out)

When using the three column layout the number of markers must be divisible by three. Three and six markers are ideal, nine markers is a bit over-bearing.

This component can also be used to show pros and cons and gives you the flexibility to add a bit more info for each point.

It can also be used to show add-ons by changing the marker to a ‘+’.

Character guidance

Component title - 40 characters (50 max)
Subtext - 175 characters (265 max)
Marker title - 20 characters
Marker copy - 72 characters

Categories with icons

Use this component when you have a number of categories divisible by three which can be easily visualised by icons. Try to use less body copy for this component than you would the two marker option as the width is smaller.

Character guidance

Same as above

Text only

When a page already uses a lot of visual cues such as markers and icons using text on it’s own can provide some breathing room. If you’re only using three categories you have a bit more room for marker copy.

Character guidance

Same as above except
Marker copy - 120 characters (if only using three)