Headings
Headings are used throughout the component set to explain what users are looking at and what they can do. Headings should give users a sense of orientation and help them to decide what to do next.
To inject more brand into information rich pages and make the message easier to scan, editors can split titles into 2 colours.
Throughout the components there are often colour themes that can be chosen. On dark, on light, on brand. These determine the colours that can be used for the titles. If available, they are shown as separate fields in the CMS which populated separately produce a 2 colour title. The 2 colour title is not available on brand green.
For accessibility reasons, centered headings should not cover more than 2 lines on desktop and consider how headings will look on mobile. Recommended max character count for headings: 40 characters.
Try to keep subheadings a consistent length when in groups to maintain a uniform layout.
Keep group subheadings to one line if possible with a guide max character count of 30 characters.
Text
Text is used in small blocks for intros and promos or larger blocks of pure information. Depending on colour themes chosen it will automatically appear in appropriate colours.
Page intro text should be simple and to the point to encourage readability and clarify the message of the title. Try not to exceed 3 lines on desktop or 6 on mobile, a guide maximum character count of 200.
Long informational rich text can be used in appropriate section components. Keep these concise to encourage users to read. Informational text can be used inline with images to increase the visual appeal of content. Recommended maximum character count of 600.
Promo text needs to point users in the right direction, encouraging onward journeys and encouraging users to find out more. For promo text a maximum count of around 60 characters is recommended.
There may be occasions where short text needs to be used for legal reasons and footnotes. This should be kept to an absolute minimum and only used if absolutely necessary.
Actions
There are 2 generic button types. If there are 2 buttons used, solid buttons should be used for direct actions and outline buttons should link to places where users can find more information. Depending on the colour themes chosen buttons will automatically appear in appropriate colours.
Buttons are often optional unless the action is linked directly to the specific component.
Button text should not go onto 2 lines meaning the maximum character count should be around 30 characters.
