Skip to main content

Using the Pinned item image component in Typecase

How to add an image to represent your page when it's pinned on a Case study, Topic, or Landing page on the University website.

Three pinned items on a live page.

When to use the Pinned item image component

Use the Pinned item image component to add an image that appears when your page is pinned on a Case study, Topic, or Landing page.

On each of these page types, the pinned item image appears with your page's title and summary.

The pinned item image only appears when someone pins your page to a Pinned item component. The image doesn't appear on your page.

Typecase positions pinned items with images above pinned items without. Before you add a pinned item image, make sure your page is not going to replace a more important piece of content at the top of a section.

You don't have to add a pinned item image to pin your page to another page.

Creating accessible content

You must make sure your content is accessible.

As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).

Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.

Finding the Pinned item image component

You can find the Pinned item image component on the Typecase templates for:

  • Campaigns
  • Case studies
  • Corporate information
  • Guides
  • Landing pages
  • Legal information
  • Projects
  • Topics

Adding content to the Pinned item image component

A screenshot of the pinned item image component
The Pinned item image component in Typecase.

Use an image that's related to the content on your page.

If you're using a Focus or Hero image on your page, use a smaller version of the same image for your Pinned item image. This helps users recognise your page and lets them know they've clicked onto the correct page.

The image should be 800 x 450 pixels, in a 16:9 ratio.

To add an image:

  1. Upload your image to Flickr or find your page's existing Focus or Hero image.
  2. Paste the image URL into the 'Pinned item image URL' field.
  3. In the 'Pinned item image alt text' field, write a description of the image for people who can't see it.

You need to publish the page for the image to appear on a Case study, Topic, or Landing page.

Things to avoid

Avoid stock images, images with text over them, or any others that do not meet our image guidance.

Avoid using images with small details. Pinned item images appear smaller than most of the other images on the website, so small details might be hard to see.

Contact us

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


On this page