When to use the Highlights component
Use the Highlights component on a Campaign page to display small images or graphics with some text to demonstrate relevant:
- accolades
- accrediting bodies
- awards
- product or service features
- sponsors
- partners
For example, you could use the Highlights component to display the University's latest league table rankings for employability on a Campaign page about careers support for students.
A Highlights section on a web page.
Finding the Highlights component
You can add one Highlights section to a Campaign page.
To find the component in the Campaign template:
- Open the drop-down menu under 'Drag and drop components'.
- Select 'Highlights'.
- Click 'Add component'.
The Highlights component will appear beneath 'Component(s) currently in use'.
Adding content to the Highlights component
Title and summary
In the Title field, add a title that describes all the highlights you're displaying, for example, 'Highly ranked for graduate prospects'.
In the Summary field, give the highlights more context to tell users why they're important, for example, 'Bath graduates are highly valued and sought after by leading graduate employers.'
Highlight image shape
Use the radio buttons to select the shape your images appear. You can choose from:
- circular - this is best for displaying rankings, portrait photos, and square photos
- rectangular - this is best for displaying logos and rectangular (landscape) images
You can only choose one shape for all the highlights in your Highlights section.
Adding a Highlight
Click the 'Add highlight' button.
You can add up to six highlights in one Highlights component.
Highlight type
Use the drop-down menu to select the type of highlight you're including.
Description
In the 'Description' field, add a brief explanation of the highlight, for example, 'We're ranked 6th for graduate prospects by the Complete University Guide 2022'.
You mustn't make unsubstantiated claims on the University website. Reference any awards, accolades, or rankings and, if possible, link to the source of information in the Highlights component or the Footnote component.
Do not use a full stop at the end of the description.
Image
Add the image URL to the 'Image web address (URL)' field.
If you chose the:
- circular Highlight image shape, your image should be 200 x 200 pixels or larger, in a 1:1 ratio
- rectangular Highlight image shape, your image should be 200 x 113 pixels or larger, in a 16:9 ratio
Don't use images with small details because users won't be able to see them clearly on the website. For awards and rankings, it's usually best to use a number graphic to represent our position instead of a photo. You can ask the Digital Content team for the correct number graphic.
Add some alternative text to the 'Alternative image text (alt text)' field to describe the image for people who can't see it.
Related content link
You can add a link to each highlight using the 'Related content web address (URL)' field.
If necessary, you should use this to validate the claim or statement in a highlight by linking to the source of the information.
Related content button
You can also add a Related content button to link to another page relevant to the Highlights section, for example, 'Learn more about our rankings and reputation'.
The Related content button appears at the bottom of the Highlights section.
To add a Related content button:
- Add some short, descriptive link text to the 'Related content button text' field.
- Add the destination page URL to the 'Related content button web address (URL)' field.
Moving your content around the page
You can drag and drop each individual highlight to change the order they appear in the Highlights section.
You can also drag and drop each Highlights component to reorder the components on a page.
Click 'Collapse this section' to hide the Highlights component or each individual Highlight while you work on other areas of the page. The content will still appear on the preview and published pages if you collapse part of the template.