Skip to main content

Using the Highlights component in Typecase

How to use the Highlights component to promote awards, accolades, rankings, sponsors, partners, or product features on a page on the University website.

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 screenshot of the Highlights component on a web page 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:

  1. Open the drop-down menu under 'Drag and drop components'.
  2. Select 'Highlights'.
  3. 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.


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.


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.

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.

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:

  1. Add some short, descriptive link text to the 'Related content button text' field.
  2. 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.

Contact us

If you have any questions about creating content or using Typecase, get in touch.

On this page