List Spotlights
A flexible tool for presenting text and links
Demo - Make a list
You can use the 'title' text field to create a simple list – a useful additional option in place of bulleted lists.
Just a heading
For each list point
No supporting copy
Demo - Present key points
Combine headings and explainer copy to present key points.
Scannable headings
Add subtext copy that expands on the heading.
Next point's heading
Aim for a similar number of lines for each, for balance.
Keep these short
Supporting copy that distills the point clearly.
Demo - Boost text engagement with an image
An image helps draw the eye, increasing the chance of users engaging with your message.
Choose landscape images
Thumbnails work best with 600px x 450px image dimensions.
Provide image alt text
'Empty' (null) or descriptive, depending on its purpose.
Make images harmonious
That's across the page as a whole, as well as these cards.
Demo - Direct users to related content
Showcase links with compelling teaser copy and engaging images to enhance wayfinding.
Demo - Choose a suitable layout
This component offers plenty of variations
But whether you include images, leave out links, or use titles only, all cards must include the same elements for consistency.
Overview
A flexible tool for presenting text and links
The List Spotlights component makes it easy for users to scan for relevant content. It’s suitable for most page types.
List Spotlights presents cards in multiple columns. The cards can include:
- Text
- Images
- Hyperlinks
Symmetry is essential when using this component. What you do to one card you must do to the others. So, if you want to use an image, all the cards must feature an image. Equally, each card should contain a similar amount of text.
How to use it
List Spotlights is a flexible component offering many different options.
Add a heading and subheading
You have the option to set up your cards with a heading and subheading. The heading must not occupy a full line – this is important for readability. Use a maximum of ten words.
The subheading should contain more words than the heading. For example:
- Heading:Our products
- Subheading:We offer a full suite of M&A solutions
Write a description
Use the description box to add supporting copy to your headings, if required.
Keep to a maximum of three full lines (about 120 characters).
Add a new card
Choose ‘add cards’ to create a new card. Use the ‘title’ text field to name your card.
The card can link to another page or be standalone.
If the card links to another page, the title should match that page’s title, so users know they’re in the right place. Otherwise, the title should be a short phrase that sets up the rest of the copy – use a maximum of ten words.
Write supporting copy
The subtext field is where you add the supporting copy. Keep this to under four lines. The recommended maximum word count depends on how many columns you use:
- Two columns – 45 words
- Three columns – 30 words
- Four columns – 19 words
The subtext of all cards must occupy the same number of lines – this is important for achieving symmetry.
Make a linking button
Start typing your page title into the ‘link URL’ text field. Select the page when it appears in the dropdown menu.
Use the ‘link text’ text field to write your button copy. Make sure your button text is clear and actionable. Good examples include:
- Contact us
- Get in touch
- Find out more
Add an image
Images draw the eye, making it more likely that users will read the nearby text.
It's important to maintain symmetry. So if one card features an image, then each card must have one.
For more information about uploading images to the CMS, see the ‘Image Guidelines’ advice.
Recommended image specifications
| Format | Orientation | Dimensions | File size |
| JPG | Landscape | Width: 600px Height: 450px | <100kb |
For more information on how to use images in the CMS go to the Image Basics page.
Do's and don'ts
Do
Keep content concise
Short and scannable items work best.
Don't
Don’t use random images
If adding a thumbnail, ensure it complements the content.
Don’t add unnecessary links
Linking is optional. Only add a link if it adds value. It’s fine for cards to just contain text.
Don’t use weak link text
Link text should be clear and actionable. Say ‘find out more’ instead of ‘click here’.