Call to action icons
A call to action (CTA) should encourage a user to carry out an action, for example, book on an open day, make an enquiry or purchase something.
We've created two styles for your CTAs (dark and light). The style is achieved by applying a class to your link. Use this method for stand-alone links only. Don't apply the style to a link mid-sentence.
How to create a Call to Action
Within your page:
- type your link text
- highlight your text
- create your hyperlink using the Insert/edit link button
- in the standard link properties click within the CSS class box and select your CTA class
(choose from the options on this page)
- save link properties
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
- 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
Which classes to choose?
We hope the class names are intuitive (eg CTA-plainArrow for a basic arrow). 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 Neutral background is applied
- those beginning with just CTA- have a Blue Two background from the colour palette (social icons use Blue Three)
- if you want to change the CTA class, go back into the link properties and remove the current class and apply a new one
Available CTAs