Calls to action
Every Content Block, regardless of its source, can have unique calls to action appended to it. A call to action (CTA) is a button used to drive users in a specific direction toward completing a task, like this:
CTAs are not a replacement for links or lists of links. CTAs should meet the following criteria before being inserted into a page:
- Action-oriented. Use imperative verbs ("Sign up", "Make an appointment", "Donate").
- Brief. Use only a few words at most. Buttons and sentences don't mix.
- Clear in their language and intent. The user should know exactly what they'll get when they click on a CTA button.
Be strategic! If you fill your page with buttons your users could find it difficult to focus.
- Expand the Call to action group at the bottom of your Content Block
- Choose your Action type
- Choose your button Size (Normal is recommended and is the same text size as your content)
- Enter the text Label for your button
- Choose where the action will link to (a Page from your site, a File/Document from your site, or an external website address)
Add additional CTAs to the same Content Block by clicking the green Plus icon under the Section > Content Block > Call to action label.
Choose your action type based on its context and purpose. Colour has meaning for users, and choosing an action type for its colour alone (e.g. to match the colours in an image) could be misleading.
|Action type||When to use|
|Primary actions are the dominant actions your users should take (eg. Apply, Register). You would not typically want more than one primary action per section, and it is recommended to keep the number of primary actions to a minimum on each page in general. If everything is primary, nothing is primary. Use strategically!|
|Secondary actions can be used more liberally as they don’t hold as much visual weight and are generally neutral (eg. Search, View).|
|Warning actions should be used when the action requires caution from the user (eg. Edit, Change). Do not use Warning for positive actions.|
|Danger actions should be used when the action is potentially dangerous for the user (eg. Delete, Remove). Do not use Danger for positive actions.|
|Info actions should be used when the action is informational (eg. Help).|
|Success actions should be used when the action is positive but not necessarily the primary action.|
Alerts and Fine print
Alerts and fine print use colour to help convey meaning and importance in your content. Any Content Block can be made into an alert or fine print.
Hey there. This is an example of an alert.
Create an alert or fine print
- Choose Alert (or Fine print) as the Content purpose of your Content Block
- Choose the appropriate Alert type for your needs (Fine print does not have additional options)
Alert and fine print types
Info: Use this alert to communicate general or helpful information to a user.
Warning: Use this alert to warn the user of something extra important, or to inform them to be cautious about something.
Danger: Use this alert to communicate something critical, dangerous or erroneous. Don’t overuse Danger alerts or you’ll be crying wolf!
Success: Use this alert to communicate something successful or positive to a user.
Fine print: Use fine print to communicate supplementary information to a user.
Combining actions and alerts
Keep your action and alert types in synch when combining actions and alerts. For example, if you want a button inside a Warning-type alert, make that button a Warning type, too.
This is a positive Success-type alert.
Don't do this
This is a negative Danger-type alert.