Reasons to Believe - Usage

Basic Guidelines

The RTB (Reasons to Believe) section is used to show 2-4 benefits / key features with small amount of copy on each RTB.

Reasons to Believe is a Section, so it already has all padding built into the Figma component. Sections always have a clear purpose and should not be altered outside of their defined pattern.

Content Guidance

Content limit

There can be a maximum of four and a minimum of two RTBs per RTB section.

Character limits

Each title of an RTB should sit comfortably on one line for both Desktop and Mobile. The Body content for an RTB should run up to a max of two lines. Try to keep the amount of content consistent between each RTB.

Alignment

Sections are always placed at full width of the viewport.

Mobile

Desktop

The below example has been downsized proportionally to fit into this documentation.

Colour Usage

Only the headline and icons can have a different colour to match the relevant brand. Please do not change any other colours within the section apart from switching between Default and Light appearances.

Background colour

The background of the light appearance can be changed to any suitable channel colour, as long as it's dark enough to provide enough contrast to comply with AA standards.

Icon Usage

To make it easier to use in Figma, we have used Skycons for the graphics next to each RTB. You can change these to be an image if needed, however you will need to create a local component of your image and switch it with the icon.

The icons can also have their colour changed as shown in the colour section.

Do not change the size of the icon from the default sizes. However, if you're switching to images, you can change the max size of the image on desktop to be a 48px square if needed.