External Relations

Content card

Content cards can be added to your pages to create portholes, pushing users off onto the next part of their journey. These work particularly well on homepages.

Use them to point customers to key information.

Like image and text CTA blocks, content cards 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:

Students revising in the library

Find funding

We'll help you navigate the process of securing funding

Digital abstract

Digital Nottingham

How we're addressing the key challenges of our age

Everything you need to know about graduation - plan your day

Your graduation

Everything you need to know about graduation

 

 

Preparation

For each content card, you'll need:

  • title*
  • sub text*
  • 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 content card
  2. Find /SharedResources/Razor/content-card.cshtml in the project explorer
  3. Drag and drop content-card.cshtml into your page
  4. Input the control settings
  5. Save settings
  6. Save and preview your page - how does your content card look?

Control settings

Header

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

Intro text

  • elaborate a little on where your card links to
  • be as brief as possible
  • try and use a similar amount of copy for each content card to achieve balance on the page

CTA link

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

Title 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

A number of sites are already using content cards, here are a few examples:

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