External Relations

Call to action icons

In order to make the most of your webpage and know that it's successful, you'll want to include some Call to Actions (CTAs). These will help users know what to do and therefore, help with navigation around your site.

We've created a number of formats for your CTAs, so they stand out on the page. They're created using a link across the whole sentence. Just link the sentence, select the CTA type in the class field and then, if you want to, bold the operative words.

Creating your Call to Action

Here's how:

  1. type your link text
  2. highlight your text
  3. create your hyperlink using the Insert/edit link button
  4. in the standard link properties click within the CSS class box and select your CTA class
    (choose from the options on this page)
  5. save link properties
  6. optional: highlight the operative word/s within your link text and make bold

To ensure the best possible results there are a number of things to be aware of:

  • ensure each new CTA is created in a new paragraph, this will keep them all evenly spaced
  • only apply one class to one link at a time
  • you can force your text to fall onto the next line by inserting a line break (Shift+Enter) - but do this after you've applied your link and class otherwise it might break
  • if you have a link with a line break that has a class already applied and you want to change the destination of your link you'll need to create your link from scratch, otherwise the link will look very strange
  • make sure you apply the link and class before bolding the text, selecting the bold text and then applying the class might apply the link and/or class to the bold attribute

Which classes to choose?

We hope the class names are intuitive (eg CTA-plainEventCalendar for a calendar icon). However, if you're struggling to decide which to use, here's a hint:

  • any begining with CTA-plain are the lighter and less obtrusive CTAs - a light blue box is applied
  • those beginning with just CTA- have a darker blue background
  • if you want to change the CTA class, go back into the link properties and remove the current class and apply a new one

Blue CTA

Pink CTA

Orange CTA

Green CTA



University of Nottingham

University Park
Nottingham, NG7 2RD

telephone: +44 (0) 115 951 5151
fax: +44 (0) 115 951 3666
email: enquiries@nottingham.ac.uk