Key Messages
This component is used to highlight key messages on a page. It consists of up to three columns that include an image, header, link, and short piece of descriptive text.
[ZEP] Key Messages can be used to present key information in groups of one, two or three, or in combination to create a grid layout (on desktop)
A key message is made up of a:
- title (sentence case)
- text link
- short description
- an image – this is optional
Key messages can be used to present key information in groups of one, two or three. Or in combination to create a grid layout (on desktop)
Do:
- keep titles succinct - aim for one line of text (approx 35 characters or less)
- keep descriptions short - aiming for no more than three lines of text
- let your content guide what's needed - it is ok to use one, two, four or five key messages despite not being a multiple of three (most web users are on mobile where the key messages will stack)
- use key messages without imagery
- consider how key messages will look on mobile - most website users visit on their smartphone (each key message will stack on top of each other creating a list)
Don't:
- use this component if your content does not include a link - this component is intended to help the user navigate around our site
- use more than two rows of key messages (six key messages in total) - the content may become too long on mobile
- use an image if it is not beneficial to the content
- add an extra key message just to make your content a multiple of three - it is ok to have fewer or more than three key messages
