External Relations

Image and text CTA block

Image and text blocks are a great way to point users onto the next part of their journey. These work particularly well on homepages.

As with content cards, they are best placed within columns. At full width, they'd be overbearing and will consume too much of a user's screen (on desktop or larger devices). It's best practice to split them between two or three columns, like this:

Digital abstract
Digital Engagement
Student walking towards camera on graduation day
Your graduation
 

 

Preparation

For each image and text CTA block, you'll need:

  • label*
  • link*
  • image* (1000x666px)
  • link destination*
  • title text (useful for screen reader users)

* required field

Instructions

  1. In edit mode of your page, place your cursor where you want your CTA block
  2. Find /SharedResources/Razor/CTA-ImageAndTextBlock.cshtml in the project explorer
  3. Drag and drop CTA-ImageAndTextBlock.cshtml into your page
  4. Input the control settings
  5. Save settings
  6. Save and preview your page - how does it look?

Control settings

CTA label

  • each content card needs a title/label
  • be clear and concise
  • ensure your title is relevant to the link destination

CTA link

  • browse for a CMS page you'd like to link to
  • or link to an external URL

CTA title (hover) text

  • provide some title (or hover) text for screen reader users, this give a little more context for those user that may have a visual impairment, for example

Image

  • upload your image before inserting your control
  • image sizes must be 1000x666px
  • ensure your image is relevant and on brand

Image alt text

  • what's going on in your image?
  • provide an image description

Examples

Here are a few examples of image and text CTA blocks being used:

External Relations

University of Nottingham
C Floor, Pope Building (Rooms C2-C10)
University Park
Nottingham, NG7 2RD

telephone: +44 (0) 115 951 5151
fax: +44 (0) 115 846 6787
email: externalrelations@nottingham.ac.uk