Feature List - Usage

Basic Guidelines

Though similar, Feature List and Feature serve two different purposes. Feature List is about promoting RTBs (Reasons To Believe) and breaking down propositions. Feature however is used for introducing the product or proposition at a higher level, before getting into the finer detail.

Feature is used to promote a proposition.

Feature List is used to break down a proposition.

Content Guidance

There are no strict character limits on this component, however as with all headlines, please try to avoid the headline running over three lines when viewed on mobile devices. Short and snappier headlines are best to keep the user’s attention and are easier to read.

Try to keep the amount of copy as consistent as possible for both the headline and body content sections to not cause any reading issues for the user.

The Text Link component can be used to link to further reading on the feature. Try to stick to one key action per each Headline List, avoiding any repetition between Text Link copy.

Alignment

Feature Lists are most often used in groups of three or four. Where there is room, typically on larger viewports like desktops, they sit side-by-side. If there is not enough room for all three to sit side-by-side, then Feature Lists will all stack one below the other.

When stacked, a 36px gap between each Feature List ensures that each item of the list has enough space.

Feature Lists must align with the grid system set out in Foundations. They sit in-line with the rest of the text.

On 12-column grids Feature Lists sit together in a row, aligning with the grid. The example below is downscaled proportionally for illustration purposes.

Image sizes

The image on Feature Lists can be turned off entirely if not needed.

There is no fixed aspect ratio for the image, however all images in a Feature List should be the same aspect ratio. This also goes for amount of text, try to keep it as consistent as possible to not cause any reading issues for the user.

Avoid using different sized images, differing lengths of text or different property settings.

Colour Usage

The headline element for the Feature List can use any brand gradient from the defined accessible Sky colour palette in Foundations.